/* ==========================================================================
   Wrought Iron Concept — 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 ---- */
	--scg-navy-900: #0d1926;   /* headers, footer */
	--scg-navy-800: #142433;
	--scg-navy-700: #1b3145;
	--scg-steel-700: #2c4257;
	--scg-steel-500: #3d5266;  /* secondary text on light — 8.1:1 on white */
	--scg-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 --scg-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 --scg-accent-ink is for.
	 */
	--scg-accent:      #e8891c;
	--scg-accent-dark: #cf7510;   /* hover fill */
	--scg-accent-ink:  #9d5c08;   /* the accent AS TEXT on light — 5.3:1 on white */
	--scg-accent-deep: #7d4805;   /* its hover — darker, not lighter */
	--scg-accent-soft: #fdf3e6;
	--scg-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 --scg-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.
	 */
	--scg-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. */
	--scg-gold-rgb:  246, 222, 89;
	--scg-gold-lite: #f9e88c;   /* type on dark  — 14.3:1 on navy */
	--scg-gold-deep: #756910;   /* type on light —  5.6:1 on white */
	--scg-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.
	 */
	--scg-ink:      #14202b;
	--scg-body:     #3d4c59;
	--scg-muted:    #54677a;
	--scg-line:     #dfe5ea;
	--scg-surface:  #f5f7f9;
	--scg-white:    #ffffff;

	/* ---- type scale (1.25 major third, fluid) ---- */
	--scg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--scg-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.
	 */
	--scg-t-xs:  0.9375rem;
	--scg-t-sm:  1rem;
	--scg-t-base: 1.125rem;
	--scg-t-lg:  clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
	--scg-t-xl:  clamp(1.375rem, 0.8vw + 1.2rem, 1.75rem);
	--scg-t-2xl: clamp(1.75rem, 1.6vw + 1.4rem, 2.5rem);
	--scg-t-3xl: clamp(2.125rem, 2.6vw + 1.6rem, 3.25rem);

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

	--scg-radius: 4px;      /* industrial: near-square, not pill-shaped */
	--scg-shadow: 0 1px 2px rgba(20, 32, 43, .06), 0 8px 24px rgba(20, 32, 43, .07);
	--scg-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(--scg-accent);
	--global-palette2: var(--scg-accent-dark);
	--global-palette3: var(--scg-ink);
	--global-palette4: var(--scg-body);
	--global-palette5: var(--scg-muted);
	--global-palette6: var(--scg-line);
	--global-palette7: var(--scg-surface);
	--global-palette8: #fafbfc;
	--global-palette9: var(--scg-white);
	--global-font-family: var(--scg-font);
}

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

/*
 * The page ground is the navy, not white.
 *
 * Every section on this site is dark (see scg_darken_sections()), so the body
 * has to be too: anything the sections do not cover — the gap Kadence leaves
 * above the footer, the overscroll area, a short page that does not fill the
 * viewport — would otherwise flash white against them.
 *
 * The body text colour matches .scg-section--dark so that the rare fragment
 * rendered outside a section is still legible rather than near-black on navy.
 */
body {
	font-family: var(--scg-font);
	font-size: var(--scg-t-base);
	line-height: 1.65;
	background: var(--scg-navy-900);
	color: #c8d4de;
	-webkit-font-smoothing: antialiased;
}

/*
 * Kadence paints its own wrapper white underneath our sections, and wraps the
 * page in a padded white card (.content-bg) with a border and a shadow. Both
 * printed a white frame around every dark page.
 *
 * Only the ground is removed, not the layout: the container keeps its width and
 * the entry keeps its rhythm, so nothing shifts — the sections simply run onto
 * the body colour instead of onto a card.
 */
#wrapper,
#inner-wrap,
.site,
.site-container,
.content-area,
.content-container,
.site-main,
.entry.content-bg,
.content-bg {
	background: transparent;
}

/* The card also carries the frame itself. */
.single-entry.content-bg,
.entry.content-bg {
	border: 0;
	box-shadow: none;
	padding: 0;
}

/*
 * Our sections are full-bleed bands with their own gutters, so the container
 * must not add a second one on a page that carries them.
 */
.page .content-container.site-container,
.home .content-container.site-container {
	padding-inline: 0;
	max-width: none;
}

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

h1 { font-size: var(--scg-t-3xl); }
h2 { font-size: var(--scg-t-2xl); }
h3 { font-size: var(--scg-t-xl); }
h4 { font-size: var(--scg-t-lg); }
h5, h6 { font-size: var(--scg-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(--scg-accent-ink); text-underline-offset: 2px; }
a:hover { color: var(--scg-accent-deep); }

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

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

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

.scg-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. */
.scg-eyebrow {
	font-size: var(--scg-t-xs);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--scg-accent-ink);
	margin-bottom: var(--scg-s-1);
}

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

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

.scg-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(--scg-radius);
	font-weight: 650;
	font-size: var(--scg-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. */
.scg-btn--primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--scg-accent);
	color: var(--scg-on-accent);
	font-weight: 700;
}
.scg-btn--primary:hover,
.woocommerce a.button.alt:hover { background: var(--scg-accent-dark); color: var(--scg-on-accent); }
.scg-btn:active { transform: translateY(1px); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 480px) {
	.scg-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;
	}
}

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

.scg-actions {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: 0 var(--scg-s-3);
	flex-wrap: wrap;
}
.scg-actions__ask { flex: 1 1 auto; padding: .6rem 1rem; font-size: var(--scg-t-xs); }
.scg-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. */
.scg-actions__view {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	flex: 1 1 auto;
	padding: .6rem 1rem;
	font-size: var(--scg-t-xs);
	font-weight: 700;
	border: 1px solid var(--scg-line);
	border-radius: var(--scg-radius);
	background: var(--scg-white);
	color: var(--scg-ink);
	text-decoration: none;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.scg-actions__view:hover,
.scg-actions__view:focus-visible {
	color: var(--scg-accent-ink, #8a6a1f);
	border-color: var(--scg-accent);
	background: var(--scg-accent-soft);
}

.scg-actions__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border: 1px solid var(--scg-line);
	border-radius: var(--scg-radius);
	color: var(--scg-steel-500);
	background: var(--scg-white);
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.scg-actions__ico:hover {
	color: var(--scg-accent-ink);
	border-color: var(--scg-accent);
	background: var(--scg-accent-soft);
}
.scg-channel--whatsapp:hover,
.scg-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) {
	.scg-actions {
		opacity: 0;
		transform: translateY(4px);
		transition: opacity .16s ease, transform .16s ease;
	}
	ul.products li.product:hover .scg-actions,
	ul.products li.product:focus-within .scg-actions {
		opacity: 1;
		transform: none;
	}
}

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

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

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

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

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

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

.scg-channels { text-align: center; }
.scg-channels__title {
	font-size: var(--scg-t-lg);
	font-weight: 650;
	color: inherit;
	margin: 0 0 var(--scg-s-3);
	max-width: none;
}
.scg-channels__list {
	list-style: none;
	margin: 0; padding: 0;
	display: flex; flex-wrap: wrap;
	gap: .6rem; justify-content: center;
}
.scg-channel {
	display: inline-flex; align-items: center; justify-content: center;
	width: 58px; height: 58px;
	border-radius: var(--scg-radius);
	border: 1px solid var(--scg-line);
	background: #fff; color: var(--scg-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. */
.scg-channel .scg-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. */
.scg-channels--labelled .scg-channel .scg-icon { width: 30px; height: 30px; }
.scg-channel:hover { transform: translateY(-2px); color: var(--scg-accent-ink); border-color: var(--scg-accent); }
.scg-section--dark .scg-channel { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #dbe4eb; }
.scg-section--dark .scg-channel:hover { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4); }

.scg-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(--scg-s-3);
	margin: 0 0 var(--scg-s-3);
}
ul.products li.product .product-excerpt p {
	font-size: var(--scg-t-sm);
	color: var(--scg-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 ---------------------------------------------------------------- */

.scg-hero {
	position: relative;
	isolation: isolate;
	color: #fff;
	background: var(--scg-navy-900);
	padding-block: clamp(4rem, 11vw, 8.5rem);
	overflow: hidden;
}
.scg-hero__bg {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%;
	object-fit: cover;
}
.scg-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%);
}
.scg-hero__inner { max-width: 46rem; }
.scg-hero h1 { color: #fff; margin: 0 0 var(--scg-s-3); }
.scg-hero__lead {
	font-size: var(--scg-t-lg);
	color: #c3d0da;
	margin: 0 0 var(--scg-s-4);
	max-width: 38rem;
}
.scg-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.scg-hero .scg-eyebrow { color: var(--scg-accent); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.site-footer .site-info,
.footer-html { font-size: var(--scg-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(--scg-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 .scg-actions { padding-bottom: var(--scg-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 .scg-btn,
	ul.products li.product .product-action-wrap .scg-actions__ico { pointer-events: auto; }

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

	/* Against the dark backdrop the outline button inverts. */
	ul.products li.product .scg-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 .scg-actions__view:hover,
	ul.products li.product .scg-actions__view:focus-visible {
		background: #fff;
		border-color: #fff;
		color: var(--scg-accent-ink, #8a6a1f);
	}

	ul.products li.product .scg-actions__ico {
		background: rgba(255,255,255,.1);
		border-color: rgba(255,255,255,.3);
		color: #fff;
	}
	ul.products li.product .scg-actions__ico:hover {
		background: #fff;
		color: var(--scg-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 .scg-actions { padding-bottom: var(--scg-s-3); }
}

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

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

.scg-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.scg-hero__bg {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .9s ease;
}
.scg-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.
 */
.scg-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%);
}
.scg-hero__title,
.scg-hero__lead,
.scg-hero__promise,
.scg-hero .scg-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.
 */
.scg-hero__inner {
	max-width: 50rem;
	position: relative;
	padding-block: var(--scg-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 .scg-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 .scg-hero opens with
 * `isolation: isolate`, so it can never escape over the header or the section
 * below.
 */
.scg-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.
 */
.scg-hero__promise {
	font-size: var(--scg-t-lg);
	font-style: italic;
	font-weight: 600;
	color: var(--scg-accent);
	margin: 0 0 var(--scg-s-2);
	letter-spacing: .01em;
}

.scg-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.
 */
.scg-hero__promise { grid-area: 1 / 1; }
.scg-hero__panel {
	grid-area: 2 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .5s ease, transform .5s ease, visibility .5s;
}
.scg-hero__panel.is-active { opacity: 1; visibility: visible; transform: none; }

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

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

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

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

.scg-hero__dots { display: flex; gap: .5rem; margin-top: var(--scg-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.
 */
.scg-hero__dot {
	width: 34px;
	height: 24px;
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	-webkit-tap-highlight-color: transparent;
}
.scg-hero__dot::before {
	content: "";
	display: block;
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .3);
	transition: background-color .2s ease;
}
.scg-hero__dot.is-active::before { background: var(--scg-accent); }
.scg-hero__dot:hover::before    { background: rgba(255, 255, 255, .6); }
.scg-hero__dot:focus-visible {
	outline: 2px solid var(--scg-gold, #d0a343);
	outline-offset: 3px;
	border-radius: 2px;
}

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

.scg-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(--scg-s-4);
	flex-wrap: wrap;
	padding: var(--scg-s-3) var(--scg-s-4);
	background: var(--scg-white);
	border: 1px solid var(--scg-line);
	border-radius: var(--scg-radius);
}
.scg-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. */
.scg-payments__text { flex: 0 1 auto; }
.scg-payments__title { font-weight: 700; color: var(--scg-ink); margin: 0; font-size: var(--scg-t-xl); }
.scg-section--dark .scg-payments { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); }
.scg-section--dark .scg-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(--scg-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(--scg-t-sm);
	letter-spacing: .01em;
}
.site-header .header-navigation a:hover,
.site-header .header-navigation .menu > li.current-menu-item > a {
	color: var(--scg-accent) !important;
}

/* Dropdown panel */
.site-header .header-navigation ul.sub-menu {
	background: var(--scg-navy-800);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: var(--scg-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 > .scg-hero:first-child { margin-top: 0; }

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

.scg-pagehero {
	position: relative;
	isolation: isolate;
	background: var(--scg-navy-900);
	color: #fff;
	padding-block: clamp(3rem, 7vw, 5.5rem);
	overflow: hidden;
}
.scg-pagehero::before {
	content: ""; position: absolute; inset: 0; z-index: -2;
	background-image: var(--scg-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. */
.scg-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%);
}
.scg-pagehero h1 { color: #fff; margin: 0 0 var(--scg-s-2); }
.scg-pagehero__lead {
	font-size: var(--scg-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. */
.scg-pagehero { text-align: center; }
.scg-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.
 */
.scg-pagehero > .scg-wrap {
	position: relative;
	isolation: isolate;
}
.scg-pagehero > .scg-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%
	);
}

.scg-pagehero h1,
.scg-pagehero__lead,
.scg-pagehero .scg-hero__promise,
.scg-pagehero .scg-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.
 */
.scg-prose { max-width: none; }
.scg-prose > * { max-width: 78ch; }
.scg-prose > .scg-head { max-width: 62ch; }
.scg-prose h2 { margin: var(--scg-s-5) 0 var(--scg-s-2); }
.scg-prose h3 { margin: var(--scg-s-4) 0 var(--scg-s-2); }
.scg-prose h4 {
	margin: var(--scg-s-4) 0 var(--scg-s-1);
	color: var(--scg-steel-700);
	font-size: var(--scg-t-lg);
}
.scg-prose > *:first-child { margin-top: 0; }
.scg-prose p { margin: 0 0 var(--scg-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. */
.scg-note {
	margin-top: var(--scg-s-5) !important;
	padding-top: var(--scg-s-3);
	border-top: 1px solid var(--scg-line);
	color: var(--scg-steel-500);
	font-size: var(--scg-t-sm);
}

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

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


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

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

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

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

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

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

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

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

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

.scg-global {
	position: relative;
	isolation: isolate;
	background: var(--scg-navy-900);
	color: #c7d4de;
	padding-block: clamp(3.5rem, 7vw, 6rem);
	overflow: hidden;
}
.scg-global::before {
	content: "";
	position: absolute; inset: 0; z-index: -2;
	background-image: var(--scg-global-img, none);
	background-size: cover;
	background-position: center;
	opacity: .85;
}
.scg-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%);
}
.scg-global__inner { max-width: 62rem; }
.scg-global .scg-eyebrow { color: var(--scg-accent); }
.scg-global__title {
	color: #fff;
	margin: var(--scg-s-2) 0 var(--scg-s-3);
	font-size: var(--scg-t-2xl);
	letter-spacing: -.02em;
	max-width: 24ch;
}
.scg-global__lead { margin: 0; max-width: 52rem; line-height: 1.65; color: #c7d4de; }

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

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

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

@media (max-width: 40rem) {
	.scg-callout__text { font-size: var(--scg-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.
   ========================================================================== */

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

.scg-channel:hover,
.scg-channel:focus-visible {
	background: var(--scg-brand);
	border-color: var(--scg-brand);
	color: #fff;
}
.scg-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.
 */
.scg-channel--branded,
.scg-channel--branded:hover,
.scg-channel--branded:focus-visible {
	background: #fff;
}
.scg-channel--branded:hover,
.scg-channel--branded:focus-visible {
	border-color: var(--scg-brand);
	box-shadow: 0 6px 18px rgba(20, 32, 43, .16);
}
.scg-section--dark .scg-channel--branded,
.scg-section--dark .scg-channel--branded:hover {
	background: #fff;
	border-color: rgba(255, 255, 255, .28);
}
.scg-section--dark .scg-channel--branded:hover { border-color: #fff; }

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

.scg-channel.is-pending {
	opacity: .45;
	cursor: default;
	filter: grayscale(1);
}
.scg-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.
 */
.scg-channel--branded.is-pending {
	opacity: .82;
	filter: none;
	background: #fff;
	border-style: dashed;
	box-shadow: none;
}
.scg-channel--branded.is-pending:hover { background: #fff; box-shadow: none; }
.scg-section--dark .scg-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.
   ========================================================================== */

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

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

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

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

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

.scg-notice {
	margin: 0 0 var(--scg-s-3);
	padding: var(--scg-s-2) var(--scg-s-3);
	border-left: 3px solid;
	border-radius: var(--scg-radius);
	font-size: var(--scg-t-sm);
}
.scg-notice--ok  { border-color: #1a7f4b; background: #eef8f2; color: #14603a; }
.scg-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.
   ========================================================================== */

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

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

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

/* The site's own contact wording, above and below the details columns. */
.scg-contact__intro,
.scg-contact__closing {
	max-width: 62ch;
	margin: 0 auto var(--scg-s-4);
	text-align: center;
	color: #c8d4de;
	font-size: var(--scg-t-sm);
}
.scg-contact__closing {
	margin: var(--scg-s-4) auto 0;
	padding-top: var(--scg-s-3);
	border-top: 1px solid rgba(255,255,255,.12);
}
.scg-contact__intro a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); white-space: nowrap; }
.scg-contact__intro a:hover { color: var(--scg-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 {
	--scg-s-6: 3.75rem;      /* section rhythm — was 4.5rem */
	--scg-s-7: 5.25rem;
	--scg-measure: 72rem;    /* the widest a block of copy should ever run */
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.scg-ticks { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: .35rem; }
.scg-ticks li { padding: .45rem 0 .45rem 1.35rem; border-bottom: 1px solid var(--scg-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. */
.scg-ticks--stack { grid-template-columns: 1fr; }
.scg-ticks--stack li { padding-block: .7rem; }

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

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

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

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

.scg-card__body { padding: var(--scg-s-2) var(--scg-s-3) var(--scg-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. */
.scg-intro + .scg-section--tight { padding-block: var(--scg-s-3) var(--scg-s-3); }
.scg-intro + .scg-section--tight + .scg-section { padding-top: var(--scg-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. */
.scg-section--dark .scg-head--center { margin-bottom: var(--scg-s-3); }

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

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

/* Expertise list inside the aside panel. */
.scg-split__aside { padding: var(--scg-s-3); }
.scg-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. */
.scg-figures { gap: var(--scg-s-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.scg-figure figcaption { padding: .6rem .75rem; font-size: var(--scg-t-xs); }
.scg-gallery { gap: var(--scg-s-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }

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

/* The referral form should not stretch to the full column. */
.scg-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. */
	.scg-hero__cta { display: grid; grid-template-columns: 1fr; gap: .6rem; margin-top: var(--scg-s-3); }
	.scg-hero__cta .scg-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. */
	.scg-hero__panel { min-height: 0; }
	.scg-hero { padding-block: var(--scg-s-5); }

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

	/* Spec panels: the label column collapses, so give the value room. */
	.scg-specpanel__list { padding-inline: var(--scg-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. */
.scg-figures { align-items: start; }
.scg-figure figcaption { border-top: 1px solid var(--scg-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".
   ========================================================================== */

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

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

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

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

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

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

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

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

/* On a light ground. */
.scg-section .scg-years__figure { color: var(--scg-ink); }
.scg-section .scg-years__label { color: var(--scg-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 .scg-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 scg- list reset that would otherwise win) */

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

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

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

.scg-value {
	position: relative;
	padding: var(--scg-s-3);
	background: var(--scg-white);
	border: 1px solid var(--scg-line);
	border-top: 2px solid var(--scg-gold);
	border-radius: var(--scg-radius);
}
.scg-value__no {
	display: block;
	font-family: var(--scg-mono);
	font-size: var(--scg-t-xs);
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--scg-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.scg-value__no { margin-top: 0; }

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

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

/* Photo bands: no card chrome, just the pictures. */
.scg-figures--plain .scg-figure {
	border: 0;
	border-radius: var(--scg-radius);
	background: transparent;
}
.scg-figures--plain .scg-figure img { border-radius: var(--scg-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.
   ========================================================================== */

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

.scg-figure.is-zoomable { cursor: zoom-in; position: relative; }
.scg-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;
}
.scg-figure.is-zoomable:hover::after,
.scg-figure.is-zoomable:focus-visible::after { opacity: 1; }
.scg-figure:focus-visible { outline: 2px solid var(--scg-gold); outline-offset: 2px; }

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

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

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

.scg-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);
}
.scg-lightbox[hidden] { display: none; }

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

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

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

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

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

.scg-footer-logo {
	display: block;
	margin: 0 0 var(--scg-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. */
.scg-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) {
	.scg-footer-logo img { max-height: 118px; max-width: 200px; }
}
.scg-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. */
.scg-footer-legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .35rem 1.25rem;
	margin: 0 0 var(--scg-s-2);
}
.site-footer .scg-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. */
.scg-footer-products {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .35rem 1.5rem;
	margin: 0 0 var(--scg-s-2);
	font-weight: 600;
}
.site-footer .scg-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.
   ========================================================================== */

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

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

/* Five commitments read better across one row than four and an orphan. */
.scg-valuegrid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.25rem), 1fr)); }
@media (max-width: 1100px) { .scg-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. */
.scg-lightbox button.scg-lightbox__x,
.scg-lightbox button.scg-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;
}
.scg-lightbox button.scg-lightbox__x:hover,
.scg-lightbox button.scg-lightbox__nav:hover {
	background: rgba(255, 255, 255, .2);
	border-color: var(--scg-gold);
	color: #fff;
}

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

/* CONTRAST. `.scg-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. */
.scg-section--dark .scg-head p,
.scg-pagehero .scg-head p,
.scg-global .scg-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. */
.scg-eyebrow { color: var(--scg-gold-deep); }
.scg-section--dark .scg-eyebrow,
.scg-pagehero .scg-eyebrow,
.scg-global .scg-eyebrow,
.scg-hero .scg-eyebrow { color: var(--scg-gold-lite); }

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

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

/* Standing rules and list markers go gold; the accent bar stays orange only
   where it marks something you can act on. */
.scg-split__aside { border-left-color: var(--scg-gold); }
.scg-applications li::before,
.scg-expertise li::before,
.scg-ticks li::before { background: var(--scg-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^="scg-"],
.entry-content ul[class*=" scg-"],
ul.scg-years,
ul.scg-standards,
ul.scg-applications,
ul.scg-expertise,
ul.scg-ticks,
ul.scg-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.
 */
.scg-section--credentials ul.scg-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; `.scg-prose p` needs naming directly because it outweighs
   `.scg-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
   `.scg-wrap`'s own `margin-inline: auto` does the centring. */
.scg-wrap.scg-prose,
.scg-section--pictures .scg-wrap.scg-prose {
	width: min(90ch, 100% - 3rem);
	max-width: none;
	margin-inline: auto;
}
.scg-prose p,
.scg-prose ul,
.scg-prose ol,
.scg-prose > * { max-width: none; }
.scg-prose > .scg-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; }

/* `.scg-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.scg-eyebrow { color: var(--scg-gold-deep); }
.scg-section--dark p.scg-eyebrow,
.scg-pagehero p.scg-eyebrow,
.scg-global p.scg-eyebrow,
.scg-hero p.scg-eyebrow,
.scg-contact p.scg-eyebrow { color: var(--scg-gold-lite); }
p.scg-hero__promise { color: var(--scg-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(--scg-s-5); }

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

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

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

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

/* The question is matched two ways on purpose. Hand-written FAQ markup carries
   .scg-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. */
.scg-faq__q,
.scg-faq__item > summary {
	list-style: none;
	cursor: pointer;
	padding: var(--scg-s-2) var(--scg-s-3);
	padding-right: 2.75rem;
	position: relative;
	font-weight: 700;
	color: var(--scg-ink);
	font-size: var(--scg-t-base);
	line-height: 1.4;
}
.scg-faq__q::-webkit-details-marker,
.scg-faq__item > summary::-webkit-details-marker { display: none; }
.scg-faq__q::after,
.scg-faq__item > summary::after {
	content: "";
	position: absolute;
	right: var(--scg-s-3);
	top: 50%;
	width: 11px; height: 11px;
	margin-top: -6px;
	border-right: 2px solid var(--scg-gold-deep);
	border-bottom: 2px solid var(--scg-gold-deep);
	transform: rotate(45deg);
	transition: transform .18s ease;
}
.scg-faq__item[open] .scg-faq__q::after,
.scg-faq__item[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.scg-faq__q:hover,
.scg-faq__item > summary:hover { color: var(--scg-accent-ink); }
.scg-faq__q:focus-visible,
.scg-faq__item > summary:focus-visible { outline: 2px solid var(--scg-gold); outline-offset: -2px; }

.scg-faq__a {
	padding: 0 var(--scg-s-3) var(--scg-s-3);
	border-top: 1px solid var(--scg-line);
	padding-top: var(--scg-s-2);
}
.scg-faq__a p { margin: 0; font-size: var(--scg-t-sm); color: var(--scg-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. */
.scg-faqgroup {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	gap: var(--scg-s-4);
	align-items: start;
}
.scg-faqgroup__head h2 { margin: 0; font-size: var(--scg-t-xl); }
.scg-faqgroup__head h2::before {
	content: "";
	display: block;
	width: 34px; height: 2px;
	margin-bottom: .7rem;
	background: var(--scg-gold);
}
.scg-faqgroup .scg-faq { max-width: none; }
@media (max-width: 860px) {
	.scg-faqgroup { grid-template-columns: 1fr; gap: var(--scg-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.
 */
.scg-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) {
	.scg-contactpage { grid-template-columns: 1fr; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.scg-detail a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(13, 25, 38, .2); }
.scg-detail a:hover,
.scg-detail a:focus-visible { color: var(--scg-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.
 */
.scg-channels--labelled .scg-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;
}

.scg-channels--labelled .scg-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;
}

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

.scg-channels--labelled .scg-channel__name {
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--scg-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;
}

.scg-channels--labelled .scg-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.
 */
.scg-channels--labelled .scg-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 ---- */

.scg-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(--scg-gold-rgb), .35);
	border-left: 3px solid var(--scg-gold, #d0a343);
	border-radius: 4px;
	background: var(--scg-gold-soft, #faf4e6);
}

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

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

.scg-refercta__mark { color: var(--scg-gold, #d0a343); opacity: .35; line-height: 0; }
.scg-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.
 */
.scg-worldmap {
	margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
	max-width: 75rem;
	border: 1px solid rgba(var(--scg-gold-rgb), .3);
	border-radius: 4px;
	overflow: hidden;
	line-height: 0;
	background: #000;
}

.scg-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.
 */
.scg-head--wide { max-width: 56rem; }
.scg-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.
 */
.scg-figures--four {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--scg-s-3, 1.25rem);
	align-items: start;
}

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

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

.scg-figures--four .scg-figure figcaption strong {
	display: block;
	color: var(--scg-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. */
.scg-section--dark .scg-figures--four .scg-figure figcaption strong,
.scg-section--pictures .scg-figures--four .scg-figure figcaption strong {
	color: var(--scg-gold-lite);
}
/* ==========================================================================
   Standalone enquiry action  [scg_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.
 */
.scg-ask { margin: var(--scg-s-3, 1.25rem) 0 var(--scg-s-4, 2rem); }

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

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

.scg-ask .scg-actions__ico {
	border: 1px solid var(--scg-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.
 */
.scg-section--dark .scg-ask .scg-actions__ico {
	border-color: rgba(255, 255, 255, .22);
	background: transparent;
	color: #f2e6cc;
}
.scg-section--dark .scg-ask .scg-actions__ico:hover,
.scg-section--dark .scg-ask .scg-actions__ico:focus-visible {
	border-color: var(--scg-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. */
.scg-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) {
	.scg-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. */
.scg-contact__big--second { margin-top: .15rem; }

.scg-detail__body .scg-detail__big + .scg-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.
   ========================================================================== */

/*
 * The catalogue band and the cards below it are painted for the shop archive
 * AND for every /product-category/ page. They are the same grid of the same
 * cards; only the body class differs (post-type-archive-product against
 * tax-product_cat), and scoping to the first alone left the category pages
 * falling back to the white card at the top of this file - a white tile on the
 * navy band, which is the one thing the picture-tile work above set out to
 * remove. The hero rule further up already covers both.
 */
:is(.post-type-archive-product, .tax-product_cat) #primary.content-area {
	background: var(--scg-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(--scg-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.
 */
/*
 * .single-product joins the list for the Related products row at the foot of
 * an item's own page. It is the same grid of the same cards, so leaving it
 * out left four white tiles under an otherwise navy page - Kadence paints
 * .product-details with its own .content-bg, and only the rule below clears
 * it. Note this covers the CARDS only: the shop band, the full-bleed
 * container and the sort row stay scoped to the archives, because related
 * products sit inside the page measure rather than running edge to edge.
 */
:is(.post-type-archive-product, .tax-product_cat, .home, .single-product) ul.products li.product.entry {
	background: rgba(255, 255, 255, .045) !important;
	border: 1px solid rgba(var(--scg-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, .tax-product_cat, .home, .single-product) ul.products li.product.entry:hover {
	border-color: var(--scg-gold) !important;
	box-shadow: 0 4px 20px rgba(var(--scg-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, .tax-product_cat, .home, .single-product) ul.products li.product img {
	margin-bottom: 0 !important;
	background: var(--scg-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, .tax-product_cat, .home, .single-product) ul.products li.product .product-details {
	background: transparent !important;
	padding-block: var(--scg-s-3) !important;
}

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

:is(.post-type-archive-product, .tax-product_cat, .home, .single-product) ul.products li.product .woocommerce-loop-product__title,
:is(.post-type-archive-product, .tax-product_cat, .home, .single-product) ul.products li.product .woocommerce-loop-product__title a {
	color: #f8fafc !important;
	font-weight: 600;
	line-height: 1.35;
}
:is(.post-type-archive-product, .tax-product_cat, .home, .single-product) 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, .tax-product_cat, .home, .single-product) ul.products li.product .woocommerce-loop-product__title,
:is(.post-type-archive-product, .tax-product_cat, .home, .single-product) ul.products li.product .product-excerpt,
:is(.post-type-archive-product, .tax-product_cat, .home, .single-product) ul.products li.product .scg-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, .tax-product_cat, .home, .single-product) ul.products li.product .scg-card__meta {
	order: 10;
	margin-top: auto;
	padding-top: var(--scg-s-2);
	font-family: var(--scg-mono);
	font-size: var(--scg-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(--scg-gold) !important;
}

/*
 * "View details" closes the card. 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 .scg-card__shop {
	order: 11;
	align-self: center;
	margin: var(--scg-s-3) var(--scg-s-3) 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 11rem;
	padding: .62rem 1.4rem;
	border: 1px solid var(--scg-gold);
	border-radius: 4px;
	background: var(--scg-gold);
	color: #14202b;
	font-size: var(--scg-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 .scg-card__shop:hover,
ul.products li.product .scg-card__shop:focus-visible {
	background: var(--scg-gold-lite);
	border-color: var(--scg-gold-lite);
	color: #0d1926;
}

:is(.post-type-archive-product, .tax-product_cat) .kadence-woo-results-count,
:is(.post-type-archive-product, .tax-product_cat) .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.
 */
:is(.post-type-archive-product, .tax-product_cat) .woocommerce-ordering select,
:is(.post-type-archive-product, .tax-product_cat) .kadence-toggle-shop-layout {
	color: #a9bcc9;
	border-color: rgba(255, 255, 255, .2);
	background-color: transparent;
}
:is(.post-type-archive-product, .tax-product_cat) .woocommerce-ordering select option {
	color: var(--scg-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. */
:is(.post-type-archive-product, .tax-product_cat) .kadence-product-toggle-container .kadence-toggle-shop-layout.toggle-active,
:is(.post-type-archive-product, .tax-product_cat) .kadence-product-toggle-container .kadence-toggle-shop-layout:hover {
	color: var(--scg-gold-lite);
	border-color: var(--scg-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, .tax-product_cat, .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, .tax-product_cat, .home, .single-product) ul.products li.product .product-action-wrap {
	background: rgba(9, 17, 26, .86) !important;
}
:is(.post-type-archive-product, .tax-product_cat, .home, .single-product) ul.products li.product .scg-actions__view,
:is(.post-type-archive-product, .tax-product_cat, .home, .single-product) ul.products li.product .scg-actions__ico {
	background: rgba(var(--scg-gold-rgb), .1) !important;
	border-color: rgba(var(--scg-gold-rgb), .55) !important;
	color: #f2e6cc !important;
}
:is(.post-type-archive-product, .tax-product_cat, .home, .single-product) ul.products li.product .scg-actions__view:hover,
:is(.post-type-archive-product, .tax-product_cat, .home, .single-product) ul.products li.product .scg-actions__view:focus-visible,
:is(.post-type-archive-product, .tax-product_cat, .home, .single-product) ul.products li.product .scg-actions__ico:hover,
:is(.post-type-archive-product, .tax-product_cat, .home, .single-product) ul.products li.product .scg-actions__ico:focus-visible {
	background: rgba(var(--scg-gold-rgb), .24) !important;
	border-color: var(--scg-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.
	 */
	:is(.post-type-archive-product, .tax-product_cat) .content-container.site-container {
		max-width: min(1400px, 100% - 3rem);
	}
	/* .scg-wrap is sized with `width`, not `max-width`, so a max-width override
	   here would be ignored — the width has to be restated. */
	.scg-section--products .scg-wrap {
		width: min(1400px, 100% - 3rem);
		max-width: none;
	}
	:is(.post-type-archive-product, .tax-product_cat, .home) ul.products.grid-cols {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	:is(.post-type-archive-product, .tax-product_cat, .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, .tax-product_cat, .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.
 */
.scg-inquiry-inline__inner { max-width: 46rem; margin-inline: auto; text-align: center; }
.scg-inquiry-inline__title { color: #fff; margin: 0 0 .35rem; }
.scg-inquiry-inline__item {
	font-family: var(--scg-mono);
	font-size: var(--scg-t-sm);
	letter-spacing: .06em;
	color: var(--scg-gold-lite);
	margin: 0 0 var(--scg-s-4);
}
.scg-form--inline { text-align: left; }
.scg-form--inline label { color: #cddae4; }
.scg-form--inline input,
.scg-form--inline textarea {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .18);
	color: #fff;
}
.scg-form--inline input:focus,
.scg-form--inline textarea:focus {
	border-color: var(--scg-gold);
	outline: 2px solid rgba(var(--scg-gold-rgb), .35);
	outline-offset: 1px;
}
.scg-form--inline input::placeholder,
.scg-form--inline textarea::placeholder { color: #8fa2b2; }
.scg-form--inline .scg-form__actions { justify-content: center; }
.scg-form--inline .scg-btn--ghost { border-color: rgba(255, 255, 255, .4); color: #fff; }
.scg-form--inline .scg-form__status { text-align: center; color: #cddae4; }
.scg-form--inline .scg-form__status.is-ok { color: #7ee0a1; }
.scg-form--inline .scg-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.
   ========================================================================== */

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

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

/*
 * The caption panel. `.scg-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.
 */
.scg-section--pictures .scg-figure figcaption,
.scg-section--pictures .scg-card__body {
	background: transparent;
	border-top: 1px solid rgba(255, 255, 255, .07);
	color: #cddae4;
	text-align: center;
	padding: var(--scg-s-2) var(--scg-s-3);
}
.scg-section--pictures .scg-figure__title,
.scg-section--pictures .scg-card__title { color: #f8fafc; }
.scg-section--pictures .scg-card__meta { color: var(--scg-gold); font-weight: 700; }
.scg-section--pictures .scg-cat__go { color: var(--scg-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. */
	.scg-section--pictures .scg-wrap {
		width: min(1400px, 100% - 3rem);
		max-width: none;
	}
	.scg-section--pictures .scg-figures,
	.scg-section--pictures .scg-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 `.scg-gallery__item`
 * rather than `.scg-figure` — a separate class for the lightbox behaviour — so
 * they were the one grid of photographs the treatment above missed.
 */
.scg-section--pictures .scg-gallery__item {
	background: rgba(255, 255, 255, .045);
	border: 1px solid rgba(var(--scg-gold-rgb), .28);
	border-radius: 8px;
	box-shadow: none;
}
.scg-section--pictures .scg-gallery__item:hover {
	border-color: var(--scg-gold);
	box-shadow: 0 4px 20px rgba(var(--scg-gold-rgb), .18);
	transform: none;
}
.scg-section--pictures .scg-gallery__item img { background: var(--scg-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. */
	.scg-section--pictures .scg-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.
 *
 * `.scg-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.
 */
.scg-gallery > figure.wp-block-image.scg-gallery__item,
.scg-figures > figure.wp-block-image.scg-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.
 */
.scg-figures > figure.wp-block-image.scg-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.scg-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 scg_subsidiary()
   in functions.php for what was done to each logo and why.
   ========================================================================== */

.scg-subsidiary {
	display: block;
	margin-block: var(--scg-s-4) var(--scg-s-3);
}
.scg-subsidiary__label {
	display: block;
	margin-bottom: var(--scg-s-3);
	color: var(--scg-gold-lite);
	font-size: var(--scg-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. */
.scg-subsidiary__row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: var(--scg-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. */
.scg-subsidiary__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	flex: 1 1 17.5rem;
	max-width: 21rem;
	padding: var(--scg-s-3) var(--scg-s-3) var(--scg-s-2);
	border: 1px solid rgba(var(--scg-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;
}
.scg-subsidiary__link:hover,
.scg-subsidiary__link:focus-visible {
	border-color: var(--scg-gold);
	box-shadow: 0 4px 20px rgba(var(--scg-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. */
.scg-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 `.scg-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.
 * `.scg-subsidiary__frame img.scg-subsidiary__mark` is (0,2,1) and settles it
 * on specificity rather than on which stylesheet happens to load last.
 */
.scg-subsidiary__frame img.scg-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. */
.scg-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. */
.scg-subsidiary__frame img.scg-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. */
.scg-subsidiary__name {
	color: var(--scg-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. */
.scg-subsidiary__site {
	color: var(--scg-gold);
	font-size: clamp(.62rem, 2.3vw, .8125rem);
	line-height: 1.45;
	white-space: nowrap;
	text-decoration: underline;
	text-decoration-color: rgba(var(--scg-gold-rgb), .45);
	text-underline-offset: .18em;
}
.scg-subsidiary__link:hover .scg-subsidiary__site,
.scg-subsidiary__link:focus-visible .scg-subsidiary__site {
	color: var(--scg-gold-lite);
	text-decoration-color: currentColor;
}

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

@media screen and (max-width: 560px) {
	.scg-subsidiary__link { max-width: none; }
	.scg-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.
   ========================================================================== */

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

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

.scg-card__meta,
ul.products li.product .scg-card__meta,
.scg-figure figcaption {
	font-size: calc(var(--scg-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. */
.scg-card__foot .scg-btn,
ul.products li.product .scg-btn,
ul.products li.product .scg-actions__view {
	font-size: calc(var(--scg-t-sm) + 2px);
}

/* Contact channel tiles. */
.scg-channels--labelled .scg-channel__name { font-size: calc(var(--scg-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. */
.scg-pagehero + .scg-section > .scg-wrap.scg-prose:first-child > p:first-child {
	font-size: var(--scg-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.
   ========================================================================== */

.scg-figure figcaption,
.scg-section--pictures .scg-figure figcaption,
.scg-gallery__item figcaption {
	color: #eef4f9;
	font-weight: 600;
}
/* The lead line inside a caption keeps its extra weight above the rest. */
.scg-figure figcaption .scg-figure__title,
.scg-section--pictures .scg-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 `.scg-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 > .scg-wrap > .scg-wrap > .scg-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.
 *
 * .scg-grid--cats is in the list because those category cards are photographs
 * too; it is the "Our product ranges" row.
 */
.scg-wrap:has(.scg-figures),
.scg-wrap:has(.scg-gallery),
.scg-wrap:has(.woocommerce),
.scg-wrap:has(ul.products),
.scg-wrap:has(.scg-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. */
:is(.post-type-archive-product, .tax-product_cat) .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. */
:is(.post-type-archive-product, .tax-product_cat) .kadence-shop-top-row,
:is(.post-type-archive-product, .tax-product_cat) .woocommerce-notices-wrapper,
:is(.post-type-archive-product, .tax-product_cat) .woocommerce-products-header {
	padding-inline: var(--scg-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. */
.scg-wrap:has(.scg-figures) .scg-figures,
.scg-wrap:has(.scg-gallery) .scg-gallery,
.scg-wrap:has(.scg-grid--cats) .scg-grid--cats {
	gap: var(--scg-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. */
.scg-section--tight:has(.scg-figures) {
	padding-block: var(--scg-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. */
.scg-wrap:has(.scg-figures) .scg-figure,
.scg-wrap:has(.scg-figures) .scg-figure img,
.scg-wrap:has(.scg-gallery) .scg-gallery__item,
.scg-wrap:has(.scg-gallery) .scg-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. */
	.scg-wrap:has(.scg-figures),
	.scg-wrap:has(.scg-gallery),
	.scg-wrap:has(.woocommerce),
	.scg-wrap:has(ul.products),
	.scg-wrap:has(.scg-grid--cats),
	:is(.post-type-archive-product, .tax-product_cat) .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. */
	.scg-wrap:has(.scg-figures) .scg-wrap,
	.scg-wrap:has(.scg-gallery) .scg-wrap,
	.scg-wrap:has(.woocommerce) .scg-wrap,
	.scg-wrap:has(ul.products) .scg-wrap,
	.scg-wrap:has(.scg-grid--cats) .scg-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.
   ========================================================================== */

.scg-section:is(:has(.scg-figures), :has(.scg-gallery), :has(ul.products), :has(.scg-grid--cats)) .scg-head {
	max-width: 60rem;
	margin-inline: auto;
	padding-inline: var(--scg-s-3);
	text-align: center;
}
.scg-section:is(:has(.scg-figures), :has(.scg-gallery), :has(ul.products), :has(.scg-grid--cats)) .scg-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. */
.scg-section:is(:has(.scg-figures), :has(.scg-gallery), :has(ul.products), :has(.scg-grid--cats)) .scg-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. */
.scg-grid--cats .scg-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.
   ========================================================================== */

.scg-btn--primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.site-header .header-navigation .menu > li.scg-nav-cta > a {
	background: var(--scg-gold);
	color: var(--scg-on-accent) !important;
	border-color: var(--scg-gold);
	font-weight: 700;
}
.scg-btn--primary:hover,
.scg-btn--primary:focus-visible,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.site-header .header-navigation .menu > li.scg-nav-cta > a:hover {
	background: var(--scg-gold-lite);
	border-color: var(--scg-gold-lite);
	color: var(--scg-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. */
.scg-btn--primary:focus-visible {
	outline: 2px solid var(--scg-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. */
.scg-hero__dot.is-active::before,
.site-header .header-navigation .menu > li > a::after {
	background: var(--scg-gold);
}
.site-header::after {
	background: linear-gradient(90deg, var(--scg-gold) 0%, rgba(var(--scg-gold-rgb), 0) 60%);
}

/* On light: the dash before each item in a tick list. */
.scg-ticks li::before,
.scg-applications li::before,
.scg-expertise li::before {
	background: var(--scg-gold-deep);
}
.scg-section--dark .scg-ticks li::before,
.scg-section--dark .scg-applications li::before,
.scg-section--dark .scg-expertise li::before,
.scg-section--pictures .scg-ticks li::before {
	background: var(--scg-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. */
.scg-intro__title::after {
	background: var(--scg-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.
   ========================================================================== */

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

.scg-hero__inner {
	width: 95%;
	max-width: none;
	margin-inline: auto;
	padding-block: var(--scg-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 `.scg-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. */
.scg-hero__lead { max-width: none; }
.scg-hero__cta  { margin-top: var(--scg-s-3); }
.scg-hero__dots { margin-top: var(--scg-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 .scg-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).
 */
.scg-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%);
}
.scg-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%. */
	.scg-hero__inner { width: calc(100% - 1.5rem); }
	.scg-hero__lead { font-size: var(--scg-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, .tax-product_cat, .home, .single-product) ul.products li.product .product-details {
	padding-block: var(--scg-s-1) var(--scg-s-2) !important;
}

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

:is(.post-type-archive-product, .tax-product_cat, .home, .single-product) ul.products li.product .product-excerpt {
	margin-block: .3rem .35rem;
}
:is(.post-type-archive-product, .tax-product_cat, .home, .single-product) 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, .tax-product_cat, .home, .single-product) ul.products li.product .scg-card__meta {
	padding-top: .2rem;
	margin-bottom: 0;
	line-height: 1.3;
}

:is(.post-type-archive-product, .tax-product_cat, .home, .single-product) ul.products li.product .scg-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.
   ========================================================================== */

.scg-callout {
	background: none;
	border-block: 0;
	padding-block: var(--scg-s-2);
}
.scg-callout__text {
	max-width: none;
	padding-inline: var(--scg-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. */
.scg-section:has(+ .scg-callout) { padding-bottom: var(--scg-s-4); }
.scg-callout + .scg-section { padding-top: var(--scg-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. */
.scg-intro { padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.scg-intro__inner {
	width: min(1400px, 100% - 2.5rem);
	max-width: none;
}
.scg-intro__contact {
	max-width: none;
	margin-top: var(--scg-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. */
.scg-hero__dot::before {
	background: rgba(255, 255, 255, .55);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.scg-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.
   ========================================================================== */

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

.scg-hero__cta,
.scg-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. */
.scg-hero__promise {
	max-width: none;
	text-align: center;
	font-size: calc(var(--scg-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. */
.scg-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, .tax-product_cat, .home) ul.products.grid-cols > li.product {
		--scg-tile-ar: 467 / 325;
	}
	:is(.post-type-archive-product, .tax-product_cat, .home) ul.products.grid-cols > li.product:nth-last-child(-n + 4) {
		--scg-tile-ar: 710 / 453;
	}

	:is(.post-type-archive-product, .tax-product_cat, .home) ul.products.grid-cols > li.product img {
		margin-top: 0;
		height: auto;
		aspect-ratio: var(--scg-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, .tax-product_cat, .home) ul.products.grid-cols > li.product .product-action-wrap {
		aspect-ratio: var(--scg-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.
   ========================================================================== */

.scg-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(--scg-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 .scg-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. */
.scg-hero__panels {
	grid-column: 2;
	display: grid;
	grid-template-columns: 1fr;
}
.scg-hero__panel { grid-area: 1 / 1; }

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

/*
 * The slide's own words, centred — "it should read in the middle".
 */
.scg-hero__panel { text-align: center; }
.scg-hero .scg-hero__panels .scg-hero__title { text-align: center; }
.scg-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. */
.scg-hero__lines {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .3rem;
	font-size: var(--scg-t-lg);
	color: #d7e3ec;
}
.scg-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. */
.scg-hero__side {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .55rem;
	font-size: var(--scg-t-sm);
	line-height: 1.4;
	color: #d7e3ec;
}
.scg-hero__side li {
	margin: 0;
	position: relative;
	padding-left: 1rem;
}
.scg-hero__side li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--scg-gold);
}
.scg-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. */
.scg-hero__side,
.scg-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. */
.scg-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) {
	.scg-hero__stage {
		grid-template-columns: 1fr 1fr;
		row-gap: var(--scg-s-3);
	}
	.scg-hero__panels     { grid-column: 1 / -1; grid-row: 1; }
	.scg-hero__side--left  { grid-column: 1; grid-row: 2; }
	.scg-hero__side--right { grid-column: 2; grid-row: 2; }
}
@media screen and (max-width: 600px) {
	.scg-hero__stage { grid-template-columns: 1fr; }
	.scg-hero__side--left  { grid-column: 1; grid-row: 2; }
	.scg-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.
 */
.scg-hero .scg-hero__stage ul.scg-hero__side,
.scg-hero .scg-hero__stage ul.scg-hero__lines {
	margin: 0;
	padding: 0;
}
.scg-hero .scg-hero__stage .scg-hero__side li,
.scg-hero .scg-hero__stage .scg-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.
   ========================================================================== */

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

@media screen and (max-width: 782px) {
	.scg-catalogue-head { padding-block: var(--scg-s-4) var(--scg-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. */
.scg-section:has(.scg-contact) .scg-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.
 */
.scg-prose-centered .scg-prose :is(h1, h2, h3, h4),
.scg-prose-centered .scg-prose :is(h1, h2, h3, h4) + p,
.scg-prose-centered .scg-prose p:has(+ ul.scg-ticks),
.scg-prose-centered .scg-prose p:has(+ ol.scg-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.
 */
.scg-pagehero + .scg-section > .scg-wrap.scg-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);
}
.scg-pagehero + .scg-section > .scg-wrap.scg-prose:first-child > p:first-child {
	max-width: none;
	text-align: center;
	font-size: clamp(.875rem, 1.35vw, 1.25rem);
	line-height: 1.45;
}
.scg-pagehero + .scg-section { padding-block: var(--scg-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. */
.scg-prose-centered .scg-prose .scg-ask .scg-actions {
	justify-content: center;
}
.scg-prose-centered .scg-prose .scg-ask .scg-actions__ask { flex: 0 0 auto; }

/* ==========================================================================
   Dark ground — the components that were written for a white one
   ==========================================================================

   The sister site runs light with dark bands; this one runs dark throughout
   (see scg_darken_sections()). Most of the system followed the flip on its own,
   because it is built on tokens and every dark band already had a treatment.
   These did not: they set a literal white background or the near-black ink
   colour directly, so on the navy they printed a white slab or, worse, dark
   text that simply vanished.

   Kept as one block at the end rather than edited in place, so the delta from
   the sister site's stylesheet stays visible and reversible.
   ========================================================================== */

/* The banner under the hero. A white band here cut the page in half. */
.scg-intro {
	background: var(--scg-navy-800);
	border-bottom: 1px solid rgba(var(--scg-gold-rgb), .22);
	border-top: 1px solid rgba(var(--scg-gold-rgb), .22);
}
.scg-intro__title { color: var(--scg-gold-lite); }
.scg-intro__sub { color: #c8d4de; }
.scg-intro__contact { color: #a9b8c6; }
.scg-intro__contact a { color: #fff; }
.scg-intro__contact a:hover { color: var(--scg-gold-lite); }

/*
 * "Our expertise" set colour: var(--scg-ink) on the list item, which is very
 * nearly black. Against the navy the eleven product lines were there in the
 * markup and invisible on the page.
 */
.scg-expertise li {
	color: #dbe4eb;
	border-bottom-color: rgba(255, 255, 255, .10);
}
.scg-expertise li::before { background: var(--scg-gold); }

/* "Applications" tiles were white cards. */
.scg-applications li {
	background: rgba(255, 255, 255, .045);
	border-color: rgba(255, 255, 255, .14);
	color: #cfdae4;
}
.scg-applications li::before { background: var(--scg-gold); }

/* The three capability cards. */
.scg-caps { color: #cfdae4; }
.scg-cap {
	background: rgba(255, 255, 255, .045);
	border-color: rgba(255, 255, 255, .14);
}
.scg-cap__title { color: #fff; }
.scg-cap__text { color: #b8c6d2; }
.scg-cap__icon { color: var(--scg-gold); background: rgba(var(--scg-gold-rgb), .12); }

/*
 * The specification panels. These are the one place a visitor reads a table, so
 * the rows keep their own faint ground rather than sitting straight on the
 * page — the same treatment the catalogue cards get.
 */
.scg-specpanel {
	background: rgba(255, 255, 255, .045);
	border-color: rgba(255, 255, 255, .14);
}
.scg-specpanel__title { color: var(--scg-gold-lite); }
.scg-specpanel__row { border-color: rgba(255, 255, 255, .10); }
.scg-specpanel__row dt { color: #a9b8c6; }
.scg-specpanel__row dd { color: #dbe4eb; }

/* The credentials strip. Both rules were scoped to .scg-section, which is now
   always dark, so they were painting ink on navy. */
.scg-section .scg-years__figure,
.scg-years__figure { color: var(--scg-gold-lite); }
.scg-section .scg-years__label,
.scg-years__label { color: #a9b8c6; }
.scg-years li { border-color: rgba(255, 255, 255, .12); }

/*
 * Section heads and prose. The base h1-h6 colour is --scg-ink and the base body
 * colour is --scg-body; both are meant for a white page. .scg-section--dark
 * already lifts h1-h3, so only the rest needs saying.
 */
.scg-section h4,
.scg-section h5,
.scg-section h6 { color: #eef4f9; }
.scg-section .scg-head p { color: #b8c6d2; }
.scg-prose { color: #c8d4de; }
.scg-prose strong { color: #eef4f9; }
.scg-prose a { color: var(--scg-gold-lite); }
.scg-prose a:hover { color: var(--scg-gold); }

/* Tick lists in converted page copy. */
.scg-ticks li { color: #c8d4de; border-color: rgba(255, 255, 255, .10); }
.scg-rule { border-color: rgba(255, 255, 255, .12); }

/*
 * Forms.
 *
 * The labels were --scg-ink on what is now a navy ground, so every field was an
 * unlabelled white box: the form still worked and nobody could tell what to
 * type in it. The inputs keep a light fill on purpose — a dark field on a dark
 * page reads as disabled, and this is the one control on the site that has to
 * look ready to receive something.
 */
.scg-form label,
.scg-form__legend { color: var(--scg-gold-lite); }
.scg-form__note { color: #a9b8c6; }
.scg-form__set { border-color: rgba(255, 255, 255, .12); }
.scg-form__status.is-ok { color: #6fe3a4; }
.scg-form__status.is-error { color: #ff9b93; }
.scg-form input::placeholder,
.scg-form textarea::placeholder { color: #6d7f8f; }

/*
 * WooCommerce's own chrome.
 *
 * The catalogue grid was already styled for the dark band it sits in, but the
 * furniture around it — the product title, the breadcrumb, the SKU and category
 * meta, the "Related products" heading — is rendered by WooCommerce outside any
 * .scg-section, so it kept the base --scg-ink colour and printed near-black on
 * the navy. The page looked half-empty until you selected the text.
 */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a { color: #97a7b5; }
.woocommerce-breadcrumb a:hover { color: var(--scg-gold-lite); }

.product_title,
.related.products > h2,
.upsells.products > h2,
.woocommerce-tabs h2,
.woocommerce-loop-product__title { color: #fff; }

.product_meta,
.product_meta .sku_wrapper,
.product_meta .posted_in { color: #a9b8c6; }
.product_meta a { color: var(--scg-gold-lite); }
.product_meta a:hover { color: var(--scg-gold); }

.woocommerce-result-count,
.woocommerce-ordering select { color: #a9b8c6; }

/* Related-product cards sit outside the catalogue's dark band. */
.related.products ul.products li.product,
.upsells.products ul.products li.product {
	background: rgba(255, 255, 255, .045);
	border-color: rgba(255, 255, 255, .14);
}

/*
 * The hero's promise line, on a narrow phone.
 *
 * "Customer satisfaction is our first priority" is 42 characters of italic set
 * at t-lg + 3px. That fits comfortably from about 420px up; below it, the line
 * runs past both edges of a 390px screen and is clipped mid-word at each end,
 * which reads as a broken layout rather than as a long sentence.
 *
 * It is allowed to wrap and stepped down a little rather than being truncated:
 * it is the first thing on the page and the one line the owner asked to keep.
 */
@media (max-width: 420px) {
	.scg-hero__promise,
	.scg-pagehero .scg-hero__promise {
		font-size: var(--scg-t-sm);
		text-wrap: balance;
		padding-inline: var(--scg-s-2);
	}
}

/* ==========================================================================
   Three to a row, and centred — matching globalmetalusa.com/architectural/
   ========================================================================== */

/*
 * The category and project tiles run three across, like the product archive
 * and like every band on the reference page.
 *
 * The inherited rule was `repeat(auto-fit, minmax(min(100%, 240px), 1fr))`.
 * That is fine inside a 1200px wrap, but these grids go full-bleed, and
 * auto-fit against the full viewport laid eleven categories out six to a row at
 * 1440 — the tiles came out smaller than the photographs in them deserve.
 */
.scg-grid--cats { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/*
 * Six columns, not three, so the last row can rebalance.
 *
 * Eleven categories in a plain three-column grid ends 3 + 3 + 3 + 2, and that
 * last pair sits at a third of the width each with the remaining third empty
 * beside them. On six columns a tile normally spans 2 — still three to a row —
 * and scg_grid_spans() widens the final row to span 3 so it fills. Same rule,
 * and the same look, as the figure bands.
 */
.scg-span2 { grid-column: span 2; }
.scg-span3 { grid-column: span 3; }
.scg-span6 { grid-column: span 6; }

@media (max-width: 900px) {
	.scg-grid--cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.scg-span2,
	.scg-span3 { grid-column: span 1; }
	.scg-span6 { grid-column: span 2; }
}
@media (max-width: 560px) {
	.scg-grid--cats { grid-template-columns: 1fr; }
	.scg-span2,
	.scg-span3,
	.scg-span6 { grid-column: span 1; }
}

/*
 * The tiles take the same faint grey as the picture bands, never white.
 *
 * `--scg-white` is still the value on the light-ground original, and a white
 * card on the navy is the one thing that breaks the page's ground.
 */
.scg-card,
.scg-grid--cats .scg-card,
ul.products li.product,
.related.products ul.products li.product {
	background: rgba(255, 255, 255, .045);
	border-color: rgba(var(--scg-gold-rgb), .28);
}
.scg-card__body,
.scg-grid--cats .scg-card__body { background: transparent; }
.scg-card__title { color: #eef4f9; }
.scg-card__meta { color: var(--scg-gold-lite); }

/*
 * Centred throughout.
 *
 * On the sister site this is opt-in per page (`body.scg-prose-centered`, set on
 * two slugs). Here it is the house style, so the class goes on every page and
 * the body copy centres with the headings rather than only the headings moving.
 */
.scg-prose-centered .scg-prose,
.scg-prose-centered .scg-prose > *,
.scg-prose-centered .scg-prose p,
.scg-prose-centered .scg-prose li { text-align: center; }

/*
 * A centred tick list runs in ONE column.
 *
 * The base list is an auto-fit grid, which is right for the short
 * specification bullets it was built for — two or three words each. The copy
 * on these pages is full sentences, and centring them inside a two-column grid
 * gave two narrow ragged columns down the middle of a 1200px page.
 *
 * The left-edge markers go too: centred text leaves them stranded away from
 * the line they belong to, pointing at nothing.
 */
.scg-prose-centered .scg-prose ul.scg-ticks,
.scg-prose-centered .scg-prose ol.scg-ticks {
	grid-template-columns: 1fr;
	max-width: 78ch;
	margin-inline: auto;
	gap: 0;
}
.scg-prose-centered .scg-prose ul.scg-ticks li,
.scg-prose-centered .scg-prose ol.scg-ticks li {
	padding-left: 0;
	padding-right: 0;
	font-size: var(--scg-t-base);
}
.scg-prose-centered .scg-prose ul.scg-ticks li::before,
.scg-prose-centered .scg-prose ol.scg-ticks li::before { display: none; }

/* The catalogue and tile grids centre their own text too. */
.scg-card__body,
ul.products li.product .entry-content-wrap { text-align: center; }
.scg-cat__go { justify-content: center; }

/*
 * Edge to edge — no gutter down either side.
 *
 * Kadence wraps the post body in `.entry-content-wrap` with 32px of horizontal
 * padding. The inherited override was written as
 * `.page .site-main > .entry-content-wrap`, which only matches when the wrap is
 * a DIRECT child of .site-main. On a normal page the chain is
 * `.site-main > .content-wrap > article.entry > .entry-content-wrap`, so it
 * never matched and every section sat 32px in from both edges — the sections
 * measured 1376 wide inside a 1440 viewport instead of the full 1440.
 *
 * Matched on the wrap itself rather than on its ancestors, so it holds wherever
 * Kadence decides to put it. The sections carry their own gutters through
 * `.scg-wrap`, and the picture bands deliberately have none.
 */
.entry-content-wrap { padding-inline: 0 !important; }

/* The article card can carry its own inset on some layouts. */
.entry.content-bg > .entry-content-wrap,
.content-wrap > .entry { padding-inline: 0; }

/* ==========================================================================
   Lines that should be lines, and the air around them
   ------------------------------------------------------------------------
   The owner's note, and the same one they made on the sister site: too much
   empty space, and standing sentences broken across two or three lines when
   the screen was wide enough to hold them whole.

   Every rule below is `width: max-content` inside a wide wrap rather than a
   nowrap. max-content sets the block to exactly the width of its longest
   unbroken line and then `max-width: 100%` caps it at the container — so the
   sentence sits on ONE line wherever the screen allows and wraps normally
   where it does not, which is what "one line if it allows the screen" asks
   for. `white-space: nowrap` would instead push the text off the side of a
   phone.
   ========================================================================== */

.scg-intro__sub,
.scg-head--center p,
.scg-pagehero__lead {
	width: max-content;
	max-width: 100%;
	margin-inline: auto;
}

/* The measures those blocks were held to. `.scg-head--center p` was capped at
   58ch and the section variant at 62ch, both of which are narrower than these
   sentences need and are what broke them in the first place. Named at the same
   specificity as the rules they undo, or they lose. */
.scg-head--center p,
.scg-section:is(:has(.scg-figures), :has(.scg-gallery), :has(ul.products), :has(.scg-grid--cats)) .scg-head p {
	max-width: 100%;
}

/* …and the wraps have to be wide enough for a long line to fit in. `.scg-head`
   sat at 44rem (60rem in picture sections), which is 700-960px — the intro
   line alone is about 1130px. */
.scg-intro__inner,
.scg-head--center,
.scg-section:is(:has(.scg-figures), :has(.scg-gallery), :has(ul.products), :has(.scg-grid--cats)) .scg-head {
	width: min(1400px, 100% - 2.5rem);
	max-width: none;
	margin-inline: auto;
}

/* The intro line stepped down a size with the viewport once it was free to run
   full width, so it fits at 1440 and stays readable on a laptop. */
.scg-intro__sub {
	font-size: clamp(1rem, 1.12vw, 1.25rem);
	margin-top: var(--scg-s-1);
}

/* --- the air -------------------------------------------------------------
   Tightened, not removed. The bands still read as separate; they simply no
   longer need a scroll between them. */
.scg-intro { padding-block: clamp(1.25rem, 2.2vw, 1.85rem); }
.scg-intro__contact { margin-top: var(--scg-s-2); }
.scg-head { margin-bottom: var(--scg-s-3); }
.scg-head h2 { margin-bottom: .35rem; }
.scg-section--dark .scg-head--center { margin-bottom: var(--scg-s-3); }

/* ==========================================================================
   Our expertise — three across
   ------------------------------------------------------------------------
   Eleven single-file rows down the middle of a 1400px page left the whole of
   both sides empty and made a short list look like a long one. Three columns
   is the same division the tiles and the figure grids use.
   ========================================================================== */

.scg-expertise {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 var(--scg-s-4);
	width: min(1400px, 100% - 2.5rem);
	margin-inline: auto;
}

/* The rule under each item is the row separator. Running it under all eleven
   put a line across the foot of each column with nothing beneath it, so the
   last item of every column drops its border — :last-child alone only reaches
   the last of the three. */
.scg-expertise li:nth-last-child(-n + 3) { border-bottom: 0; }

@media (max-width: 900px) {
	.scg-expertise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.scg-expertise li:nth-last-child(-n + 3) { border-bottom: 1px solid var(--scg-line); }
	.scg-expertise li:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (max-width: 600px) {
	.scg-expertise { grid-template-columns: 1fr; }
	.scg-expertise li:nth-last-child(-n + 3) { border-bottom: 1px solid var(--scg-line); }
	.scg-expertise li:last-child { border-bottom: 0; }
}

/* On the dark ground the light-ground line colour is invisible; the rest of
   the site re-grounds these the same way. */
.scg-section--dark .scg-expertise li,
.scg-expertise li { border-bottom-color: rgba(255, 255, 255, .1); }

/* ==========================================================================
   New York / Europe / Worldwide — centred
   ------------------------------------------------------------------------
   Three equal marks, ranged left inside a 54rem cap inside a 1400px page, so
   the row started a third of the way in and each label hung off the left of
   its own column. Centred as a row AND within each cell.
   ========================================================================== */

.scg-years {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* A gutter of its own: the row is a direct child of .entry-content rather
	   than of a wrap, so without this it runs to the section edge on a phone
	   while everything above and below it sits inset. */
	width: min(60rem, 100% - 1.5rem);
	max-width: none;
	margin-inline: auto;
	text-align: center;
}
.scg-years li {
	padding: .7rem 1rem;
	/* The gold rule was a left border, which reads as a ranged-left marker.
	   Between the cells instead, so the three sit as one row of equals. */
	border-left: 1px solid rgba(255, 255, 255, .14);
}
.scg-years li:first-child { border-left: 0; }
.scg-section .scg-years li { border-left-color: var(--scg-line); }

@media (max-width: 600px) {
	.scg-years { grid-template-columns: 1fr; }
	.scg-years li { border-left: 0; }
}

/* The credentials row is centred by `margin-inline: auto`, and the list reset
   further up sets `margin-left: 0` through `.entry-content ul[class^="scg-"]`
   — an attribute selector, so it outranks a bare `.scg-years` and pinned the
   row to the left edge. Matched at the same weight and placed after it, which
   is the same fix the reset's own comment describes for this list. */
.entry-content ul.scg-years,
.entry-content ul.scg-expertise {
	margin-inline: auto;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   The 16px that was being cut off both sides of every phone
   ------------------------------------------------------------------------
   Kadence's boxed content style bleeds the article card past its container —
   `.content-style-boxed .content-bg:not(.loop-entry) { margin-inline: -1rem }`
   — to cancel the 1rem of padding the container puts on it.

   That padding is gone: this theme's sections run edge to edge, so
   `.entry-content-wrap` had its inline padding removed. The negative margin
   compensating for it stayed, and with nothing left to cancel it simply made
   the article 32px wider than the screen. On a 390px phone every section was
   laid out at 422px starting at -16, and `overflow: hidden` on the body then
   quietly cut the ends off — which is why it never showed up as horizontal
   overflow in the checks. The category cards were losing 4px of their left
   edge, and the credentials row sat with its dividers off the screen.

   Desktop already computes to zero here, so this only ever changes the phone.
   ========================================================================== */

.content-style-boxed .content-bg:not(.loop-entry),
.content-style-boxed .site-main .content-bg:not(.loop-entry) {
	margin-left: 0;
	margin-right: 0;
	width: auto;
}

/* ==========================================================================
   Capability cards on the same six-column grid as everything else
   ------------------------------------------------------------------------
   `auto-fit, minmax(260px, 1fr)` fits as many as will go, which at 1400px is
   four — so a run of six came out 4 + 2 with two empty slots trailing the
   second row. Every other grid on this site divides into three and rebalances
   its last row to two; these now do the same, using the same span classes.
   ========================================================================== */

.scg-caps {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	width: min(1400px, 100% - 2.5rem);
	margin-inline: auto;
}
.scg-cap.scg-span2 { grid-column: span 2; }
.scg-cap.scg-span3 { grid-column: span 3; }
.scg-cap.scg-span6 { grid-column: span 6; }

@media (max-width: 900px) {
	.scg-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.scg-cap.scg-span2,
	.scg-cap.scg-span3,
	.scg-cap.scg-span6 { grid-column: auto; }
}
@media (max-width: 600px) {
	.scg-caps { grid-template-columns: 1fr; }
}

/* Tick lists on the same three-across rhythm as everything else. `auto-fit`
   was fitting four at 1400px, so a run of six came out 4 + 2. (Inside prose the
   centred rule still forces a single column — that is a reading column, not a
   grid.) */
.scg-ticks {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--scg-s-4);
}
/* The rule under each item separates rows; under the last item of each column
   it draws a line with nothing beneath it. */
.scg-ticks li:nth-last-child(-n + 3) { border-bottom: 0; }

@media (max-width: 900px) {
	.scg-ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.scg-ticks li:nth-last-child(-n + 3) { border-bottom: 1px solid var(--scg-line); }
	.scg-ticks li:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (max-width: 600px) {
	.scg-ticks { grid-template-columns: 1fr; }
	.scg-ticks li:nth-last-child(-n + 3) { border-bottom: 1px solid var(--scg-line); }
	.scg-ticks li:last-child { border-bottom: 0; }
}

/* ==========================================================================
   The banner on every page is as tall as the home hero
   The owner's words: "all other pages should have the picture big like the hero
   not narrow." The banner was two thirds the height of the home hero, so the
   photograph behind it was cropped to a strip and read as a coloured bar rather
   than as a picture. Same padding as .scg-hero now, so the same photograph
   occupies the same amount of page wherever it appears.
   ========================================================================== */

.scg-pagehero { padding-block: clamp(4.5rem, 8.5vw, 8rem); }

/*
 * The banner photograph is painted by ::before, which has no intrinsic height,
 * so the picture only ever showed through as much of the section as the padding
 * gave it. The minimum below is measured off the home hero, which comes to
 * 647px at 1440 and 681px at 1024 — its own padding plus a headline, a
 * standfirst, two buttons and a row of slide dots. A banner carries three lines
 * and would otherwise sit at 480, which is what "not as big as the home page"
 * looked like.
 *
 * Phones are the deliberate exception. The home hero runs to 819px at 390 wide
 * because its content stacks; a banner that tall on a 844px screen is the whole
 * first screen for a page whose job is what comes after it.
 */
.scg-pagehero {
	min-height: 41rem;
	display: flex;
	align-items: center;
}
.scg-pagehero > .scg-wrap { width: 100%; }

@media (max-width: 1024px) {
	.scg-pagehero { min-height: 43rem; }
}
@media (max-width: 600px) {
	.scg-pagehero { min-height: 30rem; }
}

/* ==========================================================================
   A larger logo, header and footer
   The owner asked for both to come up. Height is what makes this lockup read —
   it is a wreath stacked over a wordmark, so the lettering scales with the
   height, not the width — and the max-width is raised in step so a wide render
   is never the thing that caps it.
   ========================================================================== */

/*
 * Width, not height, and the selector has to out-rank Kadence.
 *
 * The rules above this one in the file set a max-HEIGHT, which was right when
 * the logo was the stacked lockup — wreath over wordmark. The logo in use is
 * the horizontal one, 2560x517, so at any sane width it is a quarter of that
 * height and the height cap never binds. Width is the only dimension that does
 * anything.
 *
 * Kadence prints `.site-branding a.brand img{max-width:200px}` inline in the
 * head from its own Customizer default. That is 0,2,2; a rule on
 * `.site-branding img.custom-logo` is 0,2,1 and loses silently — the logo just
 * stays at 200px however large the number here is. Matching its `a.brand` and
 * keeping the class takes it to 0,3,2.
 */
.site-branding a.brand img.custom-logo,
.site-branding img.custom-logo {
	max-width: 440px;
	max-height: none;
	width: auto;
	height: auto;
}
@media (max-width: 1024px) {
	.site-branding a.brand img.custom-logo,
	.site-branding img.custom-logo { max-width: 340px; }
}
@media (max-width: 782px) {
	.site-branding a.brand img.custom-logo,
	.site-branding img.custom-logo { max-width: 250px; }
}

/* A fifth larger than it was (owner, 23 September 2026), and as wide as the
   header lockup. The sizes attribute in [scg_footer_logo] must follow these. */
.scg-footer-logo img {
	max-height: 255px;
	max-width: 440px;
}
@media screen and (max-width: 560px) {
	.scg-footer-logo img { max-height: 170px; max-width: 290px; }
}

/* ==========================================================================
   The twenty-four, three to a row
   The owner's graph-paper sheet: three frames, a line of writing, three more.
   Each row is its own section so the writing sits BETWEEN the pictures rather
   than stacking eight paragraphs above twenty-four photographs.
   ========================================================================== */

/* Tighter than a normal band on both counts. Eight of these run one after
   another, so a full section's padding at each end would put nearly a screen of
   empty navy between every row of pictures — the thing the owner complains
   about more than any other. */
.scg-showcase { padding-block: var(--scg-s-4); }

/* The head is a couple of lines introducing three photographs, not a section
   title with a standfirst, so it loses the standard head's bottom margin and
   its title comes down a size. */
.scg-showcase__head { margin-bottom: var(--scg-s-3); }
.scg-showcase__head h2 { font-size: var(--scg-t-2xl); margin-bottom: .35rem; }
.scg-showcase__head p {
	margin: 0;
	/* Two or three sentences want a reading measure, but centred text that runs
	   the full 1400px is unreadable — the eye loses the start of the next line. */
	max-width: 56rem;
	margin-inline: auto;
}

/* Always exactly three, never a reflowed auto-fit: the layout the owner drew is
   three across, and at 1400px `auto-fit` fits four. */
.scg-showcase__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scg-showcase__row .scg-figure { grid-column: auto; }

/* A photograph out of a phone and a photograph out of a workshop camera are not
   the same shape, and a row of three ragged-bottomed pictures reads as broken.
   One aspect for every frame; the caption sits under it either way. */
.scg-showcase__row .scg-figure img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	height: auto;
}

@media (max-width: 900px) {
	.scg-showcase__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.scg-showcase__row { grid-template-columns: 1fr; }
	.scg-showcase { padding-block: var(--scg-s-3); }
}

/*
 * The shade comes off the letters, not off a panel behind them.
 *
 * The pool was widened to -18rem to cover a longer standfirst. The wrap is
 * already 1400px, so at -18rem the ellipse was 1848px across — wider than the
 * viewport — and its horizontal falloff happened off-screen. All that was left
 * on the page was the vertical falloff: a dark band with two straight edges
 * running across the middle of every photograph. The owner called it a big
 * square shadow, which is exactly what it was.
 *
 * Global Metals does not have this problem because its banner is short enough
 * that the pool covers nearly all of it, so it reads as a slightly darker
 * photograph rather than as a stripe. Now that these banners are 656px tall,
 * that no longer applies here.
 *
 * So the ellipse is sized to COMPLETE inside the frame — 38% of the wrap is a
 * 532px radius, a 1064px pool inside a 1440px page — and it is much lighter.
 * What actually keeps the type readable is the three-layer text shadow below,
 * which is tied to the letterforms and cannot draw an edge anywhere.
 */
.scg-pagehero > .scg-wrap::before { display: none; }

/*
 * With the panel gone this is the only thing between white type and a sunlit
 * photograph, so it is built in four layers that each do one job: two tight
 * un-offset rings that hug the letterform on every side, one mid layer for
 * weight, and a wide soft one that darkens a halo of picture around the word.
 *
 * Un-offset matters. A shadow with a y-offset leaves the TOP edge of every
 * letter sitting directly on the photograph, which is exactly where a
 * standfirst crossing sunlit grass falls apart.
 */
.scg-pagehero h1,
.scg-pagehero__lead,
.scg-pagehero .scg-hero__promise,
.scg-pagehero .scg-eyebrow {
	text-shadow:
		0 0 3px rgba(0, 0, 0, .98),
		0 0 7px rgba(0, 0, 0, .92),
		0 2px 12px rgba(0, 0, 0, .88),
		0 6px 34px rgba(0, 0, 0, .72);
}

/* The standfirst is the one that struggles: it is the lightest weight and the
   longest line, so it crosses more of the picture than anything else does. */
.scg-pagehero__lead { font-weight: 500; }

/* ==========================================================================
   Single product — one column, not two

   WooCommerce's classic template floats the gallery left and the summary
   right, and the enquiry form that follows is an ordinary block. A block after
   a float does not clear it: the section box started level with the top of the
   photograph and its lines ran around the picture, so "NAME" sat beside the
   gate and the fields below it spilled across the full width at odd offsets.
   The owner's description was that the picture is on the side and the quote
   form is broken around it.

   Floats are not the layout this page wants anyway. The item is one thing —
   a photograph, its number, and a way to ask about it — so the page reads top
   to bottom: picture, then what it is, then the form. Making the entry a flex
   column takes the floats out of play entirely (float does not apply to a flex
   item), which is why nothing here has to clear anything.

   The gallery and the summary take the same 46rem measure the enquiry form
   already uses, so all three sit on one centre line.
   ========================================================================== */

.single-product #product-wrap .entry.entry-content-wrap,
.single-product .entry.entry-content-wrap {
	display: flex;
	flex-direction: column;
}

.single-product .entry.entry-content-wrap > .woocommerce-product-gallery,
.single-product .entry.entry-content-wrap > .summary.entry-summary {
	float: none !important;
	width: 100% !important;
	max-width: 46rem;
	margin-inline: auto !important;
}

.single-product .entry.entry-content-wrap > .woocommerce-product-gallery {
	margin-bottom: var(--scg-s-3);
}

/* The photograph carries the same frame as a catalogue card, so an item looks
   like itself whether it is in the grid or on its own page. */
.single-product .woocommerce-product-gallery__wrapper img {
	width: 100%;
	height: auto;
	border: 1px solid rgba(var(--scg-gold-rgb), .28);
	border-radius: 8px;
	background: var(--scg-navy-900);
}

/* Title, item number and the enquiry buttons all centre under the picture. */
.single-product .summary.entry-summary { text-align: center; }
.single-product .summary.entry-summary .product_title { margin-bottom: var(--scg-s-2); }
.single-product .summary.entry-summary .scg-actions {
	justify-content: center;
	padding: 0;
	margin-bottom: var(--scg-s-2);
}
.single-product .summary.entry-summary .product_meta { color: #b9c8d4; }
.single-product .summary.entry-summary .product_meta a { color: var(--scg-gold-lite); }

/* The form and the related row are full width inside the column. */
.single-product .entry.entry-content-wrap > .scg-inquiry-inline,
.single-product .entry.entry-content-wrap > .related.products {
	width: 100%;
	clear: both;
}

/* The same reveal leak the [scg_ask] wrapper exists to fix: `.scg-actions` is
   held at opacity 0 until its catalogue card is hovered, and a product's own
   page has no card to hover — so the enquiry bar never appeared, leaving a
   45px hole between the title and the item number. */
.single-product .summary .scg-actions {
	opacity: 1;
	transform: none;
}
/* Sized to its label rather than stretched across the measure: centred, a
   609px gold button reads as a banner, not as a button. */
.single-product .summary .scg-actions__ask {
	flex: 0 0 auto;
	padding: .7rem 1.35rem;
}

/* ==========================================================================
   The owner's read-through: lists, lines, and the air around them
   ------------------------------------------------------------------------
   Three notes, and they are the same three the sister sites got:

     "there is text with bullet points that looks bad"
     "i like that is centered but do not leave that much margin"
     "where there is space it can be just one line of text"

   Every line of body copy on this site is centred, and a centred list with
   its marker pinned to the left margin leaves a column of dots pointing at
   nothing several inches from the words. Fourteen short items in single file
   down the middle of a 1400px page also make a short list look like a long
   one, with both sides of the page empty beside it.

   All of that is already answered on the home page by `.scg-expertise` —
   three across, ranged left inside each column, a gold dash at the head of
   every line and a hairline under it. The body copy uses the same list now,
   which means escaping the two rules that apply inside `.scg-prose`.
   ========================================================================== */

.scg-prose > ul.scg-expertise,
.scg-prose > ol.scg-expertise {
	max-width: none;
	width: 100%;
}

/* The centring is right for a sentence and wrong for a list item: an item
   ranged left under its own dash is a list; the same item centred is a line
   of text with a dash abandoned out at the margin. */
.scg-prose-centered .scg-prose ul.scg-expertise li,
.scg-prose-centered .scg-prose ol.scg-expertise li { text-align: left; }

/* A bare list typed into the editor later shouldn't land back on the stranded
   markers. `inside` keeps the dot with the first word, so it travels with the
   centred line instead of staying behind at the margin. */
.scg-prose-centered .scg-prose > ul:not([class]),
.scg-prose-centered .scg-prose > ol:not([class]) {
	list-style-position: inside;
	padding-left: 0;
	max-width: 78ch;
	margin-inline: auto;
}

/* Sentence-long items stay in one column — that is what `--stack` is for —
   but they were carrying the short list's left inset, which reads as an
   indent on centred text. */
.scg-prose-centered .scg-prose ul.scg-ticks--stack li { padding-inline: 0; }

/* ==========================================================================
   Lines that should be lines
   ------------------------------------------------------------------------
   The reading measure was sitting on the COLUMN — `.scg-wrap.scg-prose` is
   `width: min(90ch, 100% - 3rem)`, which comes out at 873px — so every
   heading, list and sentence in the body copy was held to 873px inside a
   1400px band, with 260px of empty page down either side of it. A heading
   needing 918px broke across two lines with a quarter of the page free
   beside it.

   The measure moves to the paragraphs, which are the only thing that wants
   one. Everything else in the column takes the width it needs: a heading
   takes the width of its own longest line, a three-across list takes the
   band. `width: max-content` capped by `max-width: 100%` is what puts a line
   on ONE line wherever the screen allows and wraps it normally where it does
   not — `white-space: nowrap` would push it off the side of a phone.
   ========================================================================== */

.scg-prose-centered .scg-wrap.scg-prose,
.scg-prose-centered .scg-section--pictures .scg-wrap.scg-prose {
	width: min(1400px, 100% - 3rem);
}

/* A paragraph still reads at 90ch — the measure both sister sites settled on
   — centred inside the wider band rather than setting the band's width.
   Named against `.scg-prose-centered` so it outweighs `.scg-prose p`, whose
   `margin` shorthand would otherwise zero the side margins and pin the column
   to the left edge. */
.scg-prose-centered .scg-prose > p {
	max-width: 90ch;
	margin-inline: auto;
}

.scg-prose-centered .scg-prose > :is(h2, h3, h4) {
	width: max-content;
	max-width: 100%;
	margin-inline: auto;
}

/* A block that is a heading and a single paragraph — exactly those two, which
   is what `:first-child` and `:last-child` together assert — is a caption for
   whatever is under it, not an essay, so the sentence gets the band. A block
   with more in it keeps the 90ch measure, because a long centred paragraph
   at full width is hard to read back to. */
.scg-prose-centered .scg-wrap.scg-prose:has(> h2:first-child + p:last-child) > p,
.scg-prose-centered .scg-wrap.scg-prose:has(> h3:first-child + p:last-child) > p {
	width: max-content;
	max-width: 100%;
}

/* …and the same for the one-line link that closes a block. */
.scg-prose-centered .scg-prose > p:last-child:has(> a:only-child) {
	width: max-content;
	max-width: 100%;
}

/* --- the air -------------------------------------------------------------
   Tightened where the band is thin and left alone where it is not: a heading
   and one sentence between 60px above and 60px below is mostly margin, while
   the full rhythm is right for a band that has something in it. */
.scg-section:not(.scg-section--tight):has(> .scg-wrap.scg-prose > h2:first-child + p:last-child),
.scg-section:not(.scg-section--tight):has(> .scg-wrap.scg-prose > h3:first-child + p:last-child) {
	padding-block: var(--scg-s-4);
}

/* The heading's own top margin is the section rhythm doing the same job a
   second time. */
.scg-prose > :is(h2, h3):first-child { margin-top: 0; }

/* The same for a block that closes with a link on its own line: a heading, a
   sentence and a link is still a caption, not a chapter. */
.scg-section:not(.scg-section--tight):has(> .scg-wrap.scg-prose > h2:first-child + p + p:last-child > a:only-child) {
	padding-block: var(--scg-s-4);
}

/* --- the row rule, hung from the top --------------------------------------
   Hung from the bottom it has to be taken back off the last row, and the last
   row of a list whose length is not a multiple of three is a partial row: of
   fourteen items, 12, 13 and 14 lost their rule, so the line under the third
   column stopped one row early while columns one and two carried on. A rule
   on the top of each item is never the last thing in a column, so there is
   nothing to take off and every column ends level. */
.scg-expertise li { border-bottom: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.scg-expertise li:nth-child(-n + 3) { border-top: 0; }

@media (max-width: 900px) {
	.scg-expertise li:nth-child(-n + 3) { border-top: 1px solid rgba(255, 255, 255, .1); }
	.scg-expertise li:nth-child(-n + 2) { border-top: 0; }
}
@media (max-width: 600px) {
	.scg-expertise li:nth-child(-n + 2) { border-top: 1px solid rgba(255, 255, 255, .1); }
	.scg-expertise li:first-child { border-top: 0; }
}

/* The tick list's separator moves to the top of each item for the same reason.
   `.scg-ticks` drops the rule from its last three items — right for the
   three-across grid it was built for, wrong in the single column this site
   puts it in: a four-item list kept one rule and lost three, and a five-item
   list kept two. */
.scg-prose-centered .scg-prose ul.scg-ticks li,
.scg-prose-centered .scg-prose ol.scg-ticks li {
	border-bottom: 0;
	border-top: 1px solid rgba(255, 255, 255, .10);
}
.scg-prose-centered .scg-prose ul.scg-ticks li:first-child,
.scg-prose-centered .scg-prose ol.scg-ticks li:first-child { border-top: 0; }

/* =========================================================================
   Owner's revisions, 19 September 2026
   ========================================================================= */

/*
 * The brand block is sized by Kadence's own `logo_width` theme mod, not here.
 *
 * It was left unset, so the theme fell back to its 200px default and printed
 * `.site-branding a.brand img{max-width:200px}` inline — at which the lockup's
 * small print was unreadable. A CSS override was the wrong fix twice over: an
 * img will not scale PAST its natural width, and the browser was already
 * choosing the 300px derivative because Kadence builds the `sizes` attribute
 * from that same setting. Raising the setting fixes the size and the sharpness
 * together; a stylesheet rule could only ever fix one of them.
 *
 * Now: 380px desktop, 300 tablet, 230 mobile.
 */

/*
 * The home hero, matched to Wrought Iron and Global Metals.
 *
 * The banner carried a radial pool of shade behind the copy. On a wide screen
 * its horizontal falloff runs off the frame, so what is left visible is the
 * flat top and bottom of the ellipse — which reads as a dark rectangle laid on
 * the photograph. The owner has now objected to it on two sites; the answer
 * that worked on both is the same: take the pool off and let the type carry
 * its own shade.
 *
 * The inner-page banners were already fixed this way. This brings the home
 * hero into line and unifies the shadow across both.
 */
.scg-hero__inner::before { display: none; }

/*
 * And the pool itself comes off.
 *
 * Worth being exact about what was where, because the first attempt at this
 * changed nothing visible. There were TWO pools: one on `.scg-hero__inner`,
 * which a later rule in this file had already switched off, and the real one on
 * `.scg-hero::after` — a radial ellipse at 76% in the middle, inherited from
 * Global Metals. Turning off the first was a no-op; the picture stayed behind
 * the second.
 *
 * The owner compared the two sites and asked for the photograph to read clear
 * "like in global metals". Both in fact carry the same overlay — Global Metals
 * only looks brighter because its slide is a sunlit yellow grating, while these
 * are trees, sky and grey steel. So matching the number would have changed
 * nothing; the number has to come down.
 *
 * What is left is a whisper: 10% falling to 4% across the frame, enough to stop
 * the white type vibrating against a pale sky and no more. The legibility that
 * the pool used to provide now comes entirely from the four-layer text shadow
 * below, which is why that shadow is heavier here than on the sister sites.
 * Remove one and the other stops working.
 */
.scg-hero::after {
	background: linear-gradient(
		100deg,
		rgba(8, 15, 23, .10) 0%,
		rgba(8, 15, 23, .07) 45%,
		rgba(8, 15, 23, .04) 100%
	);
}

.scg-hero__title,
.scg-hero__lead,
.scg-hero__promise,
.scg-hero .scg-eyebrow,
.scg-pagehero h1,
.scg-pagehero__lead,
.scg-pagehero .scg-hero__promise,
.scg-pagehero .scg-eyebrow {
	/*
	 * Four layers, and the first two carry NO offset. An offset shadow leaves
	 * the top edge of every letter sitting straight on the photograph, which is
	 * where white type over sunlit steel falls apart. The un-offset pair hugs
	 * the letterform on all four sides; the offset pair adds weight and a soft
	 * halo of darkened picture around the word.
	 */
	text-shadow:
		0 0 3px rgba(0, 0, 0, .98),
		0 0 7px rgba(0, 0, 0, .92),
		0 2px 12px rgba(0, 0, 0, .88),
		0 6px 34px rgba(0, 0, 0, .72);
}

/* =========================================================================
   Owner's revisions, 22 September 2026
   ========================================================================= */

/*
 * Inner pages open on the banner, not on an empty band.
 *
 * Kadence gives the content area an 80px top margin and its wrapper another
 * 32px of padding. On a page whose first thing is a full-bleed banner that is a
 * 112px strip of bare navy between the header and the photograph — measured on
 * every inner page, and absent on Global Metals, which the owner holds these to.
 * Only pages that start with a banner are touched.
 */
.content-area:has(.scg-pagehero) { margin-top: 0; }
.entry-content-wrap:has(.scg-pagehero) { padding-top: 0; }

/*
 * The line under a banner title sits in a column, as on Global Metals
 * (globalmetalusa.com/fabrication/ — about 740px, two lines).
 *
 * It was set `width: max-content; max-width: 100%` so that sentences keep to
 * one line where the screen allows, which is right for the section intros and
 * is kept for them. On a banner it ran the full width of the photograph, edge
 * to edge, and the owner asked for it the way the sister site has it.
 */
.scg-pagehero__lead {
	width: auto;
	max-width: 46rem;
	margin-inline: auto;
}

/* A little more air between a banner and the first words under it: the owner
   asked for "5-10px"; this is 10. */
.scg-pagehero + * > .scg-wrap > :first-child,
.scg-pagehero + * > :first-child:not(.scg-wrap) {
	margin-top: 10px;
}

/*
 * One text shadow for every piece of type on every banner, heavier than
 * before.
 *
 * The scrim over the photographs is kept light on purpose (the owner asked for
 * the pictures to read clear), so the type has to carry all of its own
 * contrast. Five layers: two un-offset rings that hug each letter on all four
 * sides, then three wider ones that darken a halo of picture around the words.
 * The first ring is pure black and 2px, which is what holds a thin stroke
 * apart from a pale sky.
 */
.scg-hero__title,
.scg-hero__lead,
.scg-hero__promise,
.scg-hero .scg-eyebrow,
.scg-hero__side,
.scg-hero__lines,
.scg-pagehero h1,
.scg-pagehero__lead,
.scg-pagehero .scg-hero__promise,
.scg-pagehero .scg-eyebrow {
	text-shadow:
		0 0 2px rgba(0, 0, 0, 1),
		0 0 5px rgba(0, 0, 0, .95),
		0 1px 10px rgba(0, 0, 0, .9),
		0 3px 20px rgba(0, 0, 0, .85),
		0 8px 40px rgba(0, 0, 0, .7);
}

/* The two standing lists either side of the home slide: 16px was the smallest
   type on the photograph, set in a grey that the sky washed out. A size up and
   near-white. */
.scg-hero__side {
	font-size: calc(var(--scg-t-sm) + 1.5px);
	font-weight: 500;
	color: #f1f6fa;
}

/*
 * Contact page: WhatsApp, Email, Find us — three across, centred, with the
 * page's own yellow.
 *
 * It was a vertical list of four, left-aligned, with icons in a muted deep gold
 * on a 14% gold wash — a different yellow from the buttons and headings around
 * it, which is what the owner noticed. The icons are now the solid lemon the
 * buttons use, with the glyph in navy.
 */
.scg-details {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--scg-s-3);
	max-width: 66rem;
	margin-inline: auto;
	text-align: center;
}
/* Kadence's `.single-content ul { margin: 0 0 …; padding-left: 2em }` is
   (0,1,1) and beat the plain class above, so the list could not centre and sat
   hard against the left of the wrap. Named with the same parent to win. */
.single-content ul.scg-details,
.scg-wrap > ul.scg-details {
	margin: 0 auto;
	padding-left: 0;
}
.scg-detail {
	grid-template-columns: 1fr;
	justify-items: center;
	/* Without this the shorter card's rows stretched to the tallest card's
	   height and its label dropped below the other two. */
	align-content: start;
	gap: .7rem;
}
.scg-detail__body { justify-items: center; }
.scg-detail__icon {
	width: 3.25rem;
	height: 3.25rem;
	background: var(--scg-gold);
	color: #0d1926;
}
.scg-detail__icon svg { width: 24px; height: 24px; }
.scg-detail__label { color: var(--scg-gold); font-size: .9rem; }
.scg-detail__line { font-size: 1.12rem; }
.scg-detail__big { font-size: 1.4rem; }
.scg-section--dark .scg-detail__muted,
.scg-detail__muted { color: #9fb0bf; }
@media (max-width: 760px) {
	.scg-details { grid-template-columns: 1fr; }
}

/*
 * Speak to us / Write to us / Find us — bigger.
 *
 * With one number, one address and one e-mail left, the three tiles were
 * mostly empty boxes in a narrow measure. They now take the full wrap width,
 * are centred, and carry their contents at a size meant to be read from across
 * a room.
 */
.scg-contact { max-width: 72rem; }
.scg-contact__cols { gap: var(--scg-s-3); }
.scg-contact__card {
	padding: var(--scg-s-4) var(--scg-s-3);
	text-align: center;
}
.scg-contact__card .scg-eyebrow { font-size: .95rem; margin-bottom: .75rem; }
/* Sized so the number stays on one line in a third of the wrap; at the 2xl
   step it broke after "415-" with the icon alone on the line above it. */
.scg-contact__big { font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem); white-space: nowrap; }
.scg-contact__big--wa a { justify-content: center; flex-wrap: nowrap; }
.scg-contact__big--wa svg { width: 1.1em; height: 1.1em; flex: none; color: var(--scg-gold); }
.scg-contact__line { font-size: 1.35rem; }
/* Three across still holds down to 861px, but the cards get narrow: keep the
   number and the e-mail address on one line there too. */
@media (min-width: 861px) and (max-width: 1180px) {
	.scg-contact__card { padding-inline: 1rem; }
	.scg-contact__big { font-size: 1.45rem; }
	.scg-contact__line { font-size: 1.1rem; }
}
.scg-contact__line a { justify-content: center; }
.scg-contact__line--muted { font-size: 1rem; }
.scg-contact__intro,
.scg-contact__closing { text-align: center; }

/* Between the tablet breakpoint and a full desktop there is not room for the
   440px lockup AND the six menu items on one line — at 1100px the menu broke
   onto a second row. The logo steps down in that band only. (Below about
   1100px the menu wraps even with no logo change — that predates this.) */
@media (min-width: 1025px) and (max-width: 1279px) {
	.site-branding a.brand img.custom-logo,
	.site-branding img.custom-logo { max-width: 360px; }
}

/* ==========================================================================
   Owner's revisions, 22 September 2026 (second round)
   ========================================================================== */

/* "Request a quote" on the hero: the glass was 8% white, which on a bright sky
   slide was no glass at all and left white type on white. A grey, frosted
   pane reads on every slide; the type turns yellow on hover, like the menu. */
.scg-hero .scg-btn--onDark {
	background: rgba(58, 66, 74, .62);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-color: rgba(255, 255, 255, .35);
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.scg-hero .scg-btn--onDark:hover,
.scg-hero .scg-btn--onDark:focus-visible {
	background: rgba(40, 46, 52, .78);
	border-color: var(--scg-gold);
	color: var(--scg-gold);
}

/* The WhatsApp / e-mail sentence on Projects. The band lost its pale gold
   ground when it was made to sit inside the dark section, but kept the ink
   and deep-gold type meant for that pale ground: navy on navy. */
.scg-section--dark .scg-callout__text { color: #dfe7ee; }
.scg-section--dark .scg-callout__text a { color: var(--scg-gold); }
.scg-section--dark .scg-callout__text a:hover,
.scg-section--dark .scg-callout__text a:focus-visible { color: var(--scg-gold-lite); }

/* ==========================================================================
   Owner’s revisions, 24 September 2026
   ========================================================================== */

/* "The main text, like 'We build for the greatest nations globally', 2px
   smaller in every slide." Taken off the same fluid size rather than set to a
   number, so it is exactly 2px less at every width: 50px on a desktop, 43.6px
   on a tablet, 33.7px on a phone. */
.scg-hero__title {
	font-size: calc(var(--scg-t-3xl) - 2px);
}