/*
 * Gambit 2026 — component styles ("Drafting Table").
 *
 * The site is a sheet on a drafting table: warm paper, ink type, pencil
 * hairlines, Gambit Blue as the only accent. Dark "instrument screens" (the
 * home hero, the pinned process stage, the clients band, every simulation)
 * are mounted on the paper like an HMI set into a drawing, so dark stays rare.
 *
 * Tokens (colours, type scale, spacing) come from theme.json as
 * --wp--preset--* custom properties. This file adds what theme.json can't
 * express: layout grids, the header, drawing details, section modes, motion.
 * Colour is read through scope variables (--gb-accent, --gb-muted, --gb-line,
 * --gb-bg, --gb-ink, --gb-focus, --gb-sweep, --gb-sweep-ink) so a component
 * follows whichever scope it sits in: paper, sheet, board, dark screen or the
 * blue CTA band. Rule for editors: small blue text on light is always
 * blue-deep; #0073BC is for fills, lines and type at 24px and up.
 *
 * Naming: .gb-* are theme component classes used by patterns and pages.
 * .is-style-* are block style variations (inc/block-styles.php).
 *
 * Motion: nothing is hidden unless theme.js has added .gb-motion to <html>
 * (it doesn't when the visitor prefers reduced motion). The animated
 * centrepieces are the canvas sims (assets/js/sims); CSS never loops.
 *
 * Contents
 *  1. Tokens & base            9. Pinned process
 *  2. Scopes (paper, sheet,   10. Media, art, mosaic, gallery
 *     board, instrument)      11. Band, seal, industries, caplist
 *  3. Typography helpers      12. Page hero & inner components
 *  4. Buttons                 13. Contact, map, page list
 *  5. Header & navigation     14. Forms (Gravity Forms)
 *  6. Mounted screens         15. CTA & footer
 *  7. Home hero               16. Placeholders
 *  8. Sim frame & sections    17. Motion, editor
 */

/* ---------------------------------------------------------------------------
 * 1. Tokens & base
 * ------------------------------------------------------------------------ */
:root {
	--gb-accent: var(--wp--preset--color--blue-deep);
	--gb-accent-lg: var(--wp--preset--color--blue);
	--gb-muted: var(--wp--preset--color--steel-600);
	--gb-line: var(--wp--preset--color--steel-200);
	--gb-line-strong: var(--wp--preset--color--steel-500);
	--gb-surface: var(--wp--preset--color--sheet);
	--gb-bg: var(--wp--preset--color--paper);
	--gb-ink: var(--wp--preset--color--graphite);
	--gb-focus: var(--wp--preset--color--blue);
	--gb-sweep: var(--wp--preset--color--graphite);
	--gb-sweep-ink: var(--wp--preset--color--white);
	--gb-ink-rgb: 21 23 26;
	--gb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--gb-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
	--gb-pad: var(--wp--style--root--padding-left, clamp(1rem, 4vw, 3rem));
	--gb-wide: var(--wp--style--global--wide-size, 1320px);
	--gb-gutter: max(var(--gb-pad), calc((100% - var(--gb-wide)) / 2));
	--gb-frame: clamp(10px, 1.25vw, 20px);
	--gb-topbar-h: 2.25rem;
	--gb-header-h: 5.25rem;
	--gb-grid: 64px;
}

@media (min-width: 782px) {
	:root { --gb-header-h: 6.25rem; }
}

html {
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	scroll-padding-top: calc(var(--gb-header-h) + 1rem);
	text-rendering: optimizeLegibility;
}

::selection { background: var(--wp--preset--color--blue); color: var(--wp--preset--color--white); }

img { height: auto; max-width: 100%; }

/* Header, main and footer butt together; full-width sections carry their own spacing. */
.wp-site-blocks > * {
	margin-block: 0;
}

.wp-block-post-content > .alignfull { margin-block: 0; }

:where(p, li) a {
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color 0.15s var(--gb-ease), text-decoration-color 0.15s;
}

:where(p, li) a:hover { text-decoration-color: currentColor; }

/* Skip link: visible on focus (core clips it with clip-path; reset that too). */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--sheet);
	clip: auto;
	clip-path: none;
	color: var(--wp--preset--color--graphite);
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	height: auto;
	left: 0.5rem;
	margin: 0;
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 2px;
	padding: 0.9rem 1.25rem;
	top: 0.5rem;
	width: auto;
	z-index: 100000;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* One focus ring for everything interactive; the scope picks the colour. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--gb-focus); outline-offset: 3px; }

/* ---------------------------------------------------------------------------
 * 2. Scopes
 *    default = paper, "Light section" = sheet, "Raised section" = board,
 *    "Instrument" = dark mounted screen, .gb-cta = flat blue band.
 * ------------------------------------------------------------------------ */
.is-style-section-light {
	--gb-surface: var(--wp--preset--color--white);
	--gb-bg: var(--wp--preset--color--sheet);
	background-color: var(--wp--preset--color--sheet);
	border-block: 1px solid var(--wp--preset--color--steel-200);
	color: var(--wp--preset--color--graphite);
}

.is-style-section-raised {
	--gb-line: #CFCABF;
	--gb-surface: var(--wp--preset--color--sheet);
	--gb-bg: var(--wp--preset--color--board);
	background-color: var(--wp--preset--color--board);
	color: var(--wp--preset--color--graphite);
}

/* Dark scope: instrument screens, the process stage, sims, the footer. */
.gb-hero2,
.gb-band,
.gb-footer,
.is-style-instrument,
.gb-sim {
	--gb-accent: var(--wp--preset--color--blue-bright);
	--gb-accent-lg: var(--wp--preset--color--blue-bright);
	--gb-muted: var(--wp--preset--color--steel-400);
	--gb-line: var(--wp--preset--color--steel-800);
	--gb-line-strong: var(--wp--preset--color--steel-600);
	--gb-surface: var(--wp--preset--color--carbon);
	--gb-bg: var(--wp--preset--color--graphite);
	--gb-ink: var(--wp--preset--color--paper);
	--gb-focus: var(--wp--preset--color--blue-bright);
	--gb-sweep: var(--wp--preset--color--paper);
	--gb-sweep-ink: var(--wp--preset--color--graphite);
	background-color: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--paper);
}

.gb-section { padding-block: var(--wp--preset--spacing--60); position: relative; }

.gb-section.gb-section--tight { padding-block: var(--wp--preset--spacing--50); }

.gb-section:not([class*="is-style-"]) + .gb-section:not([class*="is-style-"]) {
	border-top: 1px solid var(--gb-line);
}

/* Registration crosses where a section rule meets the sheet margins: the one
 * purely decorative drawing detail, in pencil. Dark screens carry their own frame. */
.gb-section:not(.is-style-instrument):not(.gb-band):not(.gb-cta)::before {
	background:
		linear-gradient(var(--gb-line-strong), var(--gb-line-strong)) left 5px top 0 / 1px 11px no-repeat,
		linear-gradient(var(--gb-line-strong), var(--gb-line-strong)) left 0 top 5px / 11px 1px no-repeat,
		linear-gradient(var(--gb-line-strong), var(--gb-line-strong)) right 5px top 0 / 1px 11px no-repeat,
		linear-gradient(var(--gb-line-strong), var(--gb-line-strong)) right 0 top 5px / 11px 1px no-repeat;
	content: "";
	height: 11px;
	left: calc(var(--gb-gutter) - 5px);
	pointer-events: none;
	position: absolute;
	right: calc(var(--gb-gutter) - 5px);
	top: -6px;
	z-index: 1;
}

@media (max-width: 599px) {
	.gb-section:not(.is-style-instrument):not(.gb-band):not(.gb-cta)::before { display: none; }
}

/* ---------------------------------------------------------------------------
 * 3. Typography helpers
 *    Display scale (theme.json): Home H1 = display (~124px at 1440), inner
 *    H1 = title (~82), H2 = xx-large (~57), statement = xx-large x 1.15.
 * ------------------------------------------------------------------------ */
.is-style-eyebrow {
	align-items: center;
	color: var(--gb-accent);
	display: flex;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	gap: 0.875rem;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.is-style-eyebrow::before {
	background: currentColor;
	content: "";
	flex: 0 0 2rem;
	height: 1px;
	transform-origin: left;
	transition: transform 0.7s var(--gb-ease) 0.15s;
}

.is-style-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.45;
	max-width: 38em;
}

.gb-muted,
.gb-muted a { color: var(--gb-muted); }

h1 { font-stretch: 82%; word-spacing: 0.04em; }

h2,
.gb-statement,
.gb-band__title { font-stretch: 87.5%; word-spacing: 0.04em; }

h1,
h2,
h3 { text-wrap: balance; }

p { text-wrap: pretty; }

/* Spec list: mono labels, hairline rows. List → Styles → "Spec list". */
.is-style-spec {
	border-top: 1px solid var(--gb-line);
	list-style: none;
	padding-left: 0 !important;
}

.is-style-spec > li {
	border-bottom: 1px solid var(--gb-line);
	display: grid;
	gap: 0.25rem 1.5rem;
	padding-block: 0.9rem;
}

@media (min-width: 640px) {
	.is-style-spec > li { align-items: baseline; grid-template-columns: minmax(10rem, 0.8fr) 2fr; }
}

.is-style-spec > li > strong:first-child {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Section heading cluster: eyebrow + h2 + optional lead. */
.gb-head {
	display: grid;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--60) !important;
}

.gb-head > * {
	margin: 0 !important;
}

.gb-head h2 { max-width: 16ch; }

@media (min-width: 900px) {
	.gb-head { align-items: end; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }

	.gb-head > .is-style-eyebrow { grid-column: 1 / -1; }
}

/* Oversized statement (Home "Why Gambit"): static, H2 x 1.15. */
.gb-statement {
	font-size: calc(var(--wp--preset--font-size--xx-large) * 1.15);
	letter-spacing: -0.03em;
	line-height: 1;
	max-width: 19ch;
}

.gb-statement em { color: var(--gb-accent-lg); font-style: normal; }

/* Trio: two or three plain columns that reflow on their own. */
.gb-trio {
	display: grid;
	gap: 0 var(--wp--preset--spacing--50);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	margin-top: var(--wp--preset--spacing--60) !important;
}

.gb-trio > * {
	border-top: 1px solid var(--gb-line-strong);
	margin: 0 !important;
	padding: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--40);
}

.gb-trio h3 {
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.01em;
	line-height: 1.2;
}

/* Arrow link: "All capabilities →" */
.gb-arrow-link a {
	align-items: center;
	color: inherit;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	gap: 0.6rem;
	letter-spacing: 0.1em;
	min-height: 24px;
	text-decoration: none;
	text-transform: uppercase;
}

.gb-arrow-link a::after {
	content: "\2192";
	content: "\2192" / "";
	transition: transform 0.2s var(--gb-ease);
}

.gb-arrow-link a:hover { color: var(--gb-accent); }

.gb-arrow-link a:hover::after { transform: translateX(0.3rem); }

/* Two-up split */
.gb-split {
	align-items: center;
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

.gb-split > *,
.gb-subnav-layout > *,
.gb-contact > *,
.gb-capdetail > * {
	margin: 0 !important;
	min-width: 0;
}

@media (min-width: 900px) {
	.gb-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.gb-split--top { align-items: start; }

	/* A photo column beside a long list stays in view while the list scrolls. */
	.gb-split--top > .gb-mosaic { position: sticky; top: calc(var(--gb-header-h) + 2rem); }
}

/* ---------------------------------------------------------------------------
 * 4. Buttons: 150 ms colour change, no fill sweep. Primary carries an arrow.
 * ------------------------------------------------------------------------ */
.wp-block-button__link {
	align-items: center;
	display: inline-flex;
	gap: 0.7em;
	min-height: 44px;
	transition: background-color 0.15s var(--gb-ease), color 0.15s var(--gb-ease), border-color 0.15s var(--gb-ease);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link::after {
	content: "\2192";
	content: "\2192" / "";
	display: inline-block;
	transition: transform 0.2s var(--gb-ease);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover::after { transform: translateX(0.25em); }

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible { background-color: var(--gb-sweep); color: var(--gb-sweep-ink); }

.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--gb-ink);
	color: var(--gb-ink);
}

.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--gb-ink);
	border-color: var(--gb-ink);
	color: var(--gb-bg);
}

.wp-block-button__link:focus-visible { outline: 2px solid var(--gb-focus); outline-offset: 3px; }

/* Hero and CTA buttons stack at equal width on phones. */
@media (max-width: 599px) {
	.gb-hero2 .wp-block-buttons,
	.gb-cta .wp-block-buttons { align-items: stretch; flex-direction: column; }

	.gb-hero2 .wp-block-button,
	.gb-cta .wp-block-button { width: 100%; }

	.gb-hero2 .wp-block-button__link,
	.gb-cta .wp-block-button__link { justify-content: center; width: 100%; }
}

/* ---------------------------------------------------------------------------
 * 5. Header & navigation
 *    The whole header (top bar + bar) is sticky with a negative top, so the
 *    top bar simply scrolls away and the bar stays: no state, no JS, no shift.
 * ------------------------------------------------------------------------ */
.gb-header {
	border-bottom: 1px solid var(--wp--preset--color--steel-200);
	color: var(--wp--preset--color--graphite);
	position: sticky;
	top: calc(var(--gb-topbar-h) * -1);
	z-index: 50;
}

.admin-bar .gb-header { top: calc(var(--wp-admin--admin-bar--height, 32px) - var(--gb-topbar-h)); }

@media (max-width: 600px) {
	.admin-bar .gb-header { top: calc(var(--gb-topbar-h) * -1); }
}

@media (max-height: 520px) {
	.gb-header,
	.admin-bar .gb-header { position: static; }
}

/* Frosted background on a pseudo-element: a backdrop-filter on the header
 * itself would trap the mobile menu's fixed overlay inside the header strip. */
.gb-header::before {
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	backdrop-filter: saturate(140%) blur(14px);
	background: rgb(242 240 234 / 0.97);
	content: "";
	inset: 0;
	position: absolute;
	z-index: -1;
}

.gb-topbar {
	border-bottom: 1px solid var(--wp--preset--color--steel-200);
	color: var(--wp--preset--color--steel-600);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	height: var(--gb-topbar-h);
	letter-spacing: 0.1em;
	overflow: hidden;
	text-transform: uppercase;
}

.gb-topbar > .wp-block-group {
	align-items: center;
	height: 100%;
	padding-block: 0 !important;
}

.gb-topbar p { margin: 0; white-space: nowrap; }

.gb-topbar a { color: inherit; text-decoration: none; }

.gb-topbar a:hover { color: var(--wp--preset--color--graphite); }

@media (max-width: 781px) {
	.gb-topbar .gb-topbar__secondary { display: none; }
}

.gb-header__bar { height: var(--gb-header-h); }

.gb-header__bar > .wp-block-group {
	align-items: center;
	height: 100%;
	padding-block: 0 !important;
}

.gb-header .wp-block-site-logo img { height: auto; width: clamp(104px, 10vw, 132px); }

.gb-header .wp-block-navigation__container { gap: clamp(0.9rem, 1.6vw, 2rem); }

.gb-header .wp-block-navigation-item__content {
	color: var(--wp--preset--color--graphite);
	padding-block: 0.5rem;
	position: relative;
	text-decoration: none;
}

.gb-header .wp-block-navigation-item__content::after {
	background: var(--wp--preset--color--blue);
	bottom: 0;
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.25s var(--gb-ease);
	width: 100%;
}

.gb-header .wp-block-navigation-item__content:hover::after,
.gb-header .current-menu-item > .wp-block-navigation-item__content::after,
.gb-header .current-menu-ancestor > .wp-block-navigation-item__content::after { transform: scaleX(1); transform-origin: left; }

.gb-header .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--sheet) !important;
	border: 1px solid var(--wp--preset--color--steel-200) !important;
	box-shadow: 0 18px 40px -24px rgb(var(--gb-ink-rgb) / 0.35);
	color: var(--wp--preset--color--graphite) !important;
	padding: 0.5rem 0;
}

.gb-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0.6rem 1.1rem; }

.gb-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--blue-deep); }

.gb-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }

/* 24px tap target (WCAG 2.5.8), but the chevron itself stays at type size and weight. */
.gb-header .wp-block-navigation__submenu-icon {
	align-items: center;
	display: inline-flex;
	height: 24px;
	justify-content: flex-start;
	margin-left: 0;
	margin-right: -0.6rem;
	min-width: 24px;
	padding: 0 0 0 5px;
	width: 24px;
}

.gb-header .wp-block-navigation__submenu-icon svg {
	color: var(--gb-muted);
	height: 8px;
	margin: 0;
	stroke-width: 1.5px;
	transition: transform 0.15s ease, color 0.15s ease;
	width: 9px;
}

.gb-header .wp-block-navigation-item:hover > .wp-block-navigation__submenu-icon svg,
.gb-header .wp-block-navigation__submenu-icon[aria-expanded="true"] svg {
	color: currentColor;
}

.gb-header .wp-block-navigation__submenu-icon[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.gb-header .wp-block-navigation__responsive-container-open,
.gb-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--graphite);
	min-height: 44px;
	min-width: 44px;
}

.gb-header .gb-header__cta .wp-block-button__link { padding: 0.75rem 1.1rem; white-space: nowrap; }

/* Tablet: keep the hamburger up to 999px (core switches at 600px, which wraps the bar). */
@media (max-width: 999px) {
	.gb-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }

	.gb-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }

	/* Menu toggle sits at the far right, after the button. */
	.gb-header .gb-header__cta { order: -1; }
}

@media (max-width: 600px) {
	.gb-header .gb-header__cta .wp-block-button__link { letter-spacing: 0.06em; padding: 0.6rem 0.75rem; }

	.gb-header .gb-header__cta .wp-block-button__link::after { display: none; }

	.gb-header__bar .wp-block-group { gap: 0.75rem !important; }
}

/* "Request a quote" as a menu item: only where the bar button is dropped. */
.gb-nav-cta { display: none !important; }

/* Very narrow phones: the menu carries the quote link instead of the button. */
@media (max-width: 380px) {
	.gb-header .gb-header__cta { display: none; }

	.gb-nav-cta { display: list-item !important; }

	.gb-topbar .wp-block-group { justify-content: center !important; }

	.gb-topbar p:first-child { display: none; }
}

/* Mobile overlay menu, on paper */
.gb-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--paper) !important;
	color: var(--wp--preset--color--graphite) !important;
	padding: var(--wp--preset--spacing--50) var(--gb-pad);
}

.gb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.gb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.gb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.gb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { align-items: flex-start !important; text-align: left; }

.gb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	border-top: 1px solid var(--wp--preset--color--steel-200);
	gap: 1.25rem;
	padding-top: var(--wp--preset--spacing--40);
	width: 100%;
}

.gb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 1.75rem;
	font-stretch: 87.5%;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
}

.gb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none;
	padding-left: 0 !important;
	padding-top: 0.5rem;
}

.gb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1.125rem; font-weight: 400; }

/*
 * Logo on paper. The only usable file is the white-on-transparent PNG (white
 * GAMBIT, #BEBFC1 MACHINING, white cutter-tip dot). The official positive logo
 * is #404041 / #939598 / #0073BC. A linear tone map reproduces it from the
 * same pixels: invert(0.86) brightness(1.794) maps #FFFFFF to #404040 and
 * #BEBFC1 to #949597. The cutter-tip dot (top band of the file) is re-inked
 * Gambit Blue with a masked overlay. INTERIM: replace all of this with a real
 * positive/vector logo (ask the client for an SVG) and delete these rules.
 * --gb-logo-url is printed in <head> by inc/assets.php.
 */
.gb-header .custom-logo-link {
	display: inline-block;
	line-height: 0;
	position: relative;
}

.gb-header .custom-logo-link img { display: block; filter: invert(0.86) brightness(1.794); }

.gb-header .custom-logo-link::after {
	background: var(--wp--preset--color--blue);
	clip-path: inset(0 12% 91% 72%);
	content: "";
	inset: 0;
	-webkit-mask: var(--gb-logo-url) 0 0 / 100% 100% no-repeat;
	mask: var(--gb-logo-url) 0 0 / 100% 100% no-repeat;
	pointer-events: none;
	position: absolute;
}

/* ---------------------------------------------------------------------------
 * 6. Mounted screens
 *    Dark screens sit inset from the page by a paper margin, with a thin
 *    drawing outline offset around them (a viewport on a sheet).
 * ------------------------------------------------------------------------ */
.wp-block-post-content > :is(.gb-hero2, .gb-band, .is-style-instrument).alignfull {
	margin-block: calc(var(--gb-frame) * 1.5) !important;
	margin-left: calc(var(--wp--style--root--padding-left) * -1 + var(--gb-frame)) !important;
	margin-right: calc(var(--wp--style--root--padding-right) * -1 + var(--gb-frame)) !important;
	outline: 1px solid var(--wp--preset--color--steel-500);
	outline-offset: calc(var(--gb-frame) * 0.45);
}

.wp-block-post-content > .gb-hero2.alignfull { margin-bottom: var(--gb-frame) !important; margin-top: var(--gb-frame) !important; }

/* ---------------------------------------------------------------------------
 * 7. Home hero: dark instrument screen. Text left, the lathe sim right, the
 *    spec rail on the fold. Classes: .gb-hero2 > .gb-hero2__inner (eyebrow,
 *    lead, buttons), .gb-hero2__sim (a .gb-simwrap), .gb-hero2__rail.gb-rail
 * ------------------------------------------------------------------------ */
.wp-block-group.gb-hero2 {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding-block: 0;
	grid-template-rows: 1fr auto;
	isolation: isolate;
	min-height: calc(100svh - var(--gb-topbar-h) - var(--gb-header-h) - var(--gb-frame) * 2);
	overflow: hidden;
	padding-inline: var(--gb-gutter);
	position: relative;
}

.gb-hero2 > * {
	margin-block: 0 !important;
}

/* Faint static drawing grid, strongest behind the sim. */
.gb-hero2::before {
	background-image:
		linear-gradient(to right, rgb(255 255 255 / 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgb(255 255 255 / 0.05) 1px, transparent 1px);
	background-position: -1px -1px;
	background-size: var(--gb-grid) var(--gb-grid);
	content: "";
	inset: 0;
	-webkit-mask-image: radial-gradient(90% 100% at 85% 40%, #000 0%, rgb(0 0 0 / 0.35) 55%, transparent 100%);
	mask-image: radial-gradient(90% 100% at 85% 40%, #000 0%, rgb(0 0 0 / 0.35) 55%, transparent 100%);
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.gb-hero2__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	justify-content: center;
	padding-block: var(--wp--preset--spacing--50);
}

.gb-hero2__inner > * {
	margin: 0 !important;
}

/* Display size, eased down on short screens so the spec rail stays on the fold
 * (never below the page-title size, so the H1 is always the largest text). */
.gb-hero2 h1 {
	font-size: clamp(var(--wp--preset--font-size--title), (100svh - 37.5rem) / 1.9, var(--wp--preset--font-size--display));
	letter-spacing: -0.03em;
	line-height: 0.92;
}

.gb-hero2 .is-style-lead { max-width: 30em; }

.gb-hero2__sim .gb-simwrap { max-width: 38rem; }

.gb-hero2__sim {
	align-self: center;
	margin: 0 !important;
	min-width: 0;
	padding-bottom: var(--wp--preset--spacing--30);
}

@media (min-width: 900px) {
	.wp-block-group.gb-hero2 { column-gap: var(--wp--preset--spacing--50); grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }

	.gb-hero2__inner { grid-column: 1; grid-row: 1; }

	.gb-hero2 > .gb-hero2__sim {
		grid-column: 2;
		grid-row: 1;
		padding-top: var(--wp--preset--spacing--30);
	}

	.gb-hero2__rail { grid-column: 1 / -1; grid-row: 2; }
}

.gb-hero2__rail { border-top: 1px solid var(--gb-line); }

/* Spec rail: 2 up on mobile, 4 up on desktop, hairline dividers. */
.gb-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.gb-rail > * {
	border-top: 1px solid var(--gb-line);
	margin: 0 !important;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) 0;
}

.gb-rail > *:nth-child(even) {
	border-left: 1px solid var(--gb-line);
	padding-left: var(--wp--preset--spacing--30);
}

.gb-rail > *:nth-child(-n+2) {
	border-top: 0;
}

@media (min-width: 960px) {
	.gb-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.gb-rail > * {
		border-top: 0;
	}

	.gb-rail > * + * {
		border-left: 1px solid var(--gb-line);
		padding-left: var(--wp--preset--spacing--40) !important;
	}
}

.gb-rail__value {
	font-size: clamp(1.5rem, 1rem + 1.2vw, 2rem);
	font-stretch: 87.5%;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 0 0 0.5rem !important;
}

.gb-rail__label {
	color: var(--gb-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	line-height: 1.5;
	margin: 0 !important;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * 8. Sim frame. Sims (assets/js/sims) draw their own dark panel from the theme
 *    tokens, so they are dark HMI screens on the paper. Markup contract:
 *    <figure class="gb-simwrap"><div class="gb-sim" data-sim="name"
 *    style="--gb-sim-ar:16 / 10"></div><figcaption>…</figcaption></figure>
 * ------------------------------------------------------------------------ */
.gb-simwrap { margin: 0; min-width: 0; }

.gb-sim {
	aspect-ratio: var(--gb-sim-ar, 16 / 10);
	box-shadow: 0 34px 60px -38px rgb(var(--gb-ink-rgb) / 0.55);
	margin: 8px;
	outline: 1px solid var(--wp--preset--color--steel-500);
	outline-offset: 6px;
	overflow: hidden;
	position: relative;
}

/* Blue registration tick straddling the top-left corner. */
.gb-sim::before {
	border-left: 2px solid var(--wp--preset--color--blue);
	border-top: 2px solid var(--wp--preset--color--blue);
	content: "";
	height: 18px;
	left: -1px;
	pointer-events: none;
	position: absolute;
	top: -1px;
	width: 18px;
	z-index: 2;
}

.gb-sim canvas { display: block; }

.gb-simwrap figcaption {
	color: var(--gb-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	margin: 0.9rem 8px 0;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * 9. Pinned process: Machined → Tested → Marked → Traceable
 *
 * Default (phones, short screens, reduced motion): the dark stage simply
 * stacks the four steps. .is-pinned (theme.js, >= 960 wide and >= 700 tall):
 * the stage sticks while the track scrolls; the active step lights up and its
 * sim shows. Inactive sims are visibility:hidden so only ONE canvas runs.
 * Markup: .gb-process > .alignwide > (head, .gb-process__track >
 * .gb-process__steps > .gb-step > h3, .gb-step__body, figure.gb-simwrap).
 * ------------------------------------------------------------------------ */
.gb-process__steps {
	counter-reset: gb-step;
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

.gb-process__steps > * {
	margin: 0 !important;
}

.gb-step {
	border-top: 1px solid var(--gb-line);
	display: grid;
	gap: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
}

.gb-step > * {
	margin: 0 !important;
}

.gb-step h3 {
	align-items: baseline;
	display: flex;
	font-size: clamp(2.5rem, min(0.8rem + 5.2vw, calc((100svh - 22.5rem) / 5.6)), 6.25rem);
	font-stretch: 82%;
	gap: 1.25rem;
	letter-spacing: -0.03em;
	line-height: 0.95;
	word-spacing: 0.04em;
}

.gb-step h3::before {
	color: var(--gb-accent);
	content: counter(gb-step, decimal-leading-zero);
	counter-increment: gb-step;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.1em;
	transform: translateY(-1.2em);
}

.gb-step__body {
	display: grid;
	gap: 0.9rem;
	justify-items: start;
}

.gb-step__body > * {
	margin: 0 !important;
}

.gb-step__body p { color: var(--gb-muted); max-width: 38ch; }

@media (min-width: 960px) and (min-height: 700px) {
	/* Scroll length lives on the track that directly contains the sticky stage. */
	.gb-process.is-pinned .gb-process__track { min-height: calc(var(--steps, 4) * 45vh + 100vh); }

	.gb-process.is-pinned .gb-process__steps {
		column-gap: var(--wp--preset--spacing--50);
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		grid-template-rows: repeat(8, min-content) minmax(0, 1fr);
		height: calc(100svh - var(--gb-header-h) - 3rem);
		margin-block: 0;
		position: sticky;
		row-gap: 0;
		top: calc(var(--gb-header-h) + 1.5rem);
	}

	.gb-process.is-pinned .gb-step { display: contents; }

	.gb-process.is-pinned .gb-step h3 {
		border-top: 1px solid var(--gb-line);
		color: var(--gb-muted);
		grid-column: 1;
		padding-block: 0.2em 0.1em;
		transition: color 0.4s var(--gb-ease);
	}

	.gb-process.is-pinned .gb-step.is-active h3 { color: var(--gb-ink); }

	.gb-process.is-pinned .gb-step__body {
		grid-column: 1;
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		transition: max-height 0.5s var(--gb-ease), opacity 0.4s var(--gb-ease), padding 0.5s var(--gb-ease);
	}

	.gb-process.is-pinned .gb-step.is-active .gb-step__body {
		max-height: 13rem;
		opacity: 1;
		padding-block: 0.25rem 0.75rem;
	}

	.gb-process.is-pinned .gb-step .gb-simwrap {
		align-self: center;
		grid-column: 2;
		grid-row: 1 / -1;
		opacity: 0;
		transition: opacity 0.45s var(--gb-ease), visibility 0s 0.45s;
		visibility: hidden;
	}

	.gb-process.is-pinned .gb-step.is-active .gb-simwrap {
		opacity: 1;
		transition: opacity 0.45s var(--gb-ease), visibility 0s;
		visibility: visible;
		z-index: 1;
	}
}

/* ---------------------------------------------------------------------------
 * 10. Media, art, mosaic, gallery
 * ------------------------------------------------------------------------ */
.gb-fig {
	margin: 0;
	overflow: hidden;
	position: relative;
}

.gb-fig img {
	display: block;
	object-fit: cover;
	width: 100%;
}

.gb-fig--tall img { aspect-ratio: 4 / 5; }

/* Photo plates: a pencil hairline keeps white shots from bleeding into the paper. */
.gb-fig img,
.gb-capdetail figure img,
.wp-block-gallery img,
.gb-mosaic img,
.gb-leader figure img { outline: 1px solid rgb(var(--gb-ink-rgb) / 0.14); outline-offset: -1px; }

/* Figure captions are paper tags on the photo. */
.gb-fig figcaption {
	background: rgb(251 250 247 / 0.94);
	border: 1px solid var(--wp--preset--color--steel-200);
	bottom: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--graphite);
	left: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0.5rem 0.75rem;
	position: absolute;
	text-transform: uppercase;
}

/* Image → Styles → "Crop marks": engineering-drawing corner ticks. */
.is-style-crop-marks { padding: 10px; position: relative; }

.is-style-crop-marks::before,
.is-style-crop-marks::after {
	border-color: var(--wp--preset--color--blue);
	border-style: solid;
	content: "";
	height: 14px;
	pointer-events: none;
	position: absolute;
	width: 14px;
	z-index: 1;
}

.is-style-crop-marks::before {
	border-width: 1px 0 0 1px;
	left: 0;
	top: 0;
}

.is-style-crop-marks::after {
	border-width: 0 1px 1px 0;
	bottom: 0;
	right: 0;
}

.is-style-crop-marks img { display: block; }

/* Original drawings (assets/art/*.svg): ink on transparent, for paper. */
.gb-art { margin: 0; }

.gb-art img {
	display: block;
	height: auto;
	outline: 0;
	width: 100%;
}

/* Featured image under a page title (generic page template). */
.gb-page-media { margin: 0; overflow: hidden; }

.gb-page-media img {
	aspect-ratio: 21 / 9;
	display: block;
	max-height: 28rem;
	object-fit: cover;
	width: 100%;
}

/* Mosaic: a wide first tile over two columns of 4:3 tiles. */
.gb-mosaic {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gb-mosaic > * {
	margin: 0 !important;
}

.gb-mosaic img {
	aspect-ratio: 4 / 3;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.gb-mosaic > :first-child { grid-column: 1 / -1; }

.gb-mosaic > :first-child img { aspect-ratio: 2 / 1; }

/* Gallery: uniform grid (2 up on phones, 3 up from 782px); core lightbox on click. */
.wp-block-gallery.gb-gallery {
	display: grid !important;
	gap: var(--wp--preset--spacing--20) !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wp-block-gallery.gb-gallery > .wp-block-image {
	margin: 0 !important;
	overflow: hidden;
	position: relative;
	width: auto !important;
}

.wp-block-gallery.gb-gallery > .wp-block-image img {
	aspect-ratio: 4 / 3;
	display: block;
	height: 100% !important;
	object-fit: cover;
	width: 100%;
}

/* Odd count on two columns: the last tile spans instead of leaving a hole. */
@media (max-width: 781px) {
	.wp-block-gallery.gb-gallery > .wp-block-image:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 782px) {
	.wp-block-gallery.gb-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Lightbox trigger: keep the tap target at least 32px. */
.wp-block-gallery .lightbox-trigger,
.wp-block-image .lightbox-trigger { min-height: 32px; min-width: 32px; }

/* ---------------------------------------------------------------------------
 * 11. Clients band, seal, industries, capability list
 * ------------------------------------------------------------------------ */
.wp-block-group.gb-band {
	display: grid;
	isolation: isolate;
	min-height: clamp(24rem, 55vh, 36rem);
	overflow: hidden;
	padding-block: 0;
	position: relative;
}

.gb-band > * {
	grid-area: 1 / 1;
	margin: 0 !important;
}

/* The photo fills the band without setting its height. */
.gb-band__media { inset: 0; position: absolute; }

.gb-band__media img { height: 100%; object-fit: cover; width: 100%; }

.gb-band__text {
	align-self: end;
	background: linear-gradient(0deg, rgb(var(--gb-ink-rgb) / 0.96) 0%, rgb(var(--gb-ink-rgb) / 0.78) 55%, rgb(var(--gb-ink-rgb) / 0) 100%);
	display: grid;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--70) var(--gb-gutter) var(--wp--preset--spacing--50);
	z-index: 1;
}

.gb-band__text > * {
	margin: 0 !important;
}

.gb-band__title {
	font-size: calc(var(--wp--preset--font-size--xx-large) * 1.15);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
	max-width: 22ch;
}

.gb-band__meta {
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Inspection seal: a static stamp (paper disc, ink ring, blue core). */
.gb-seal {
	align-items: center;
	aspect-ratio: 1;
	background: var(--gb-bg);
	border: 1px solid var(--gb-ink);
	border-radius: 50%;
	color: var(--gb-ink);
	position: relative;
	width: clamp(8.5rem, 12vw, 11rem);
}

/* Text runs around the ring (SVG textPath from gb_seal()); a thin inner ring and a blue screw head complete the stamp. */
.gb-seal svg { display: block; height: 100%; inset: 0; position: absolute; width: 100%; }

.gb-seal text {
	fill: currentColor;
	font: 500 11px var(--wp--preset--font-family--mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.gb-seal::before {
	border: 1px solid var(--gb-line-strong);
	border-radius: 50%;
	content: "";
	inset: 21%;
	pointer-events: none;
	position: absolute;
}

/* Screw-head mark: a slotted head (the shop makes screws and small parts). Drawn as a mask so it takes the brand blue. */
.gb-seal::after {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill-rule='evenodd' d='M16 2a14 14 0 1 0 0 28a14 14 0 1 0 0-28zM29.58 9.24L5 26.45L2.42 22.76L27 5.55z'/%3E%3C/svg%3E") center / contain no-repeat;
	background: var(--wp--preset--color--blue);
	content: "";
	height: 22%;
	left: 50%;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill-rule='evenodd' d='M16 2a14 14 0 1 0 0 28a14 14 0 1 0 0-28zM29.58 9.24L5 26.45L2.42 22.76L27 5.55z'/%3E%3C/svg%3E") center / contain no-repeat;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 22%;
}

.gb-seal--xl {
	justify-self: center;
	width: clamp(14rem, 26vw, 24rem);
}

/* Photo with a static seal overlapping its corner. */
.gb-photo-seal { margin: 0; position: relative; }

.gb-photo-seal img {
	aspect-ratio: 4 / 3;
	display: block;
	object-fit: cover;
	width: 100%;
}

.gb-photo-seal .gb-seal {
	bottom: -1.5rem;
	position: absolute;
	right: 1rem;
	width: clamp(6.5rem, 10vw, 8.5rem);
	z-index: 2;
}

@media (min-width: 900px) {
	.gb-photo-seal .gb-seal { left: -2.5rem; right: auto; }
}

/* Industries: static hairline rows. */
.gb-industries {
	border-top: 1px solid var(--gb-line);
	list-style: none;
	margin: 0;
	padding: 0 !important;
}

.gb-industries > li {
	border-bottom: 1px solid var(--gb-line);
	font-size: var(--wp--preset--font-size--x-large);
	font-stretch: 87.5%;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
	padding: var(--wp--preset--spacing--30) 0;
}

/* Capability list (Home, under the pinned stage): seven hairline rows. */
.gb-caplist-wrap { margin-top: var(--wp--preset--spacing--60) !important; }

.gb-caplist {
	border-top: 1px solid var(--gb-line-strong);
	list-style: none;
	margin: 0;
	padding: 0 !important;
}

.gb-caplist > li { border-bottom: 1px solid var(--gb-line); margin: 0 !important; }

/* Each row is one link: the name (strong) and its one-line description. */
.gb-caplist a {
	align-items: baseline;
	color: var(--gb-muted);
	display: grid;
	font-size: var(--wp--preset--font-size--small);
	gap: 0.2rem 1.5rem;
	padding-block: 0.75rem;
	text-decoration: none;
}

.gb-caplist strong {
	color: var(--gb-ink);
	font-size: var(--wp--preset--font-size--large);
	font-stretch: 87.5%;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.2;
}

.gb-caplist a:hover strong { color: var(--gb-accent); }

@media (min-width: 782px) {
	.gb-caplist a { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

/* Chips (managed services): a static list. */
.gb-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
	padding: 0 !important;
}

.gb-chips li {
	background: var(--gb-surface);
	border: 1px solid var(--gb-line-strong);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	padding: 0.6rem 0.9rem;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * 12. Page hero & inner components
 * ------------------------------------------------------------------------ */
.gb-phero {
	border-bottom: 1px solid var(--gb-line);
	isolation: isolate;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	position: relative;
}

/* Faint static drawing grid, fading out from the top-left. */
.gb-phero::before {
	background-image:
		linear-gradient(to right, var(--gb-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--gb-line) 1px, transparent 1px);
	background-position: -1px -1px;
	background-size: var(--gb-grid) var(--gb-grid);
	content: "";
	inset: 0;
	-webkit-mask-image: radial-gradient(120% 90% at 0% 0%, #000 0%, rgb(0 0 0 / 0.3) 50%, transparent 80%);
	mask-image: radial-gradient(120% 90% at 0% 0%, #000 0%, rgb(0 0 0 / 0.3) 50%, transparent 80%);
	pointer-events: none;
	position: absolute;
	z-index: -2;
}

.gb-phero--compact { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); }

.gb-phero__grid {
	align-items: center;
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.gb-phero__grid > * {
	margin: 0 !important;
	min-width: 0;
}

.gb-phero__text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.gb-phero__text > * {
	margin: 0 !important;
}

.gb-phero h1 {
	font-size: var(--wp--preset--font-size--title);
	letter-spacing: -0.03em;
	line-height: 0.95;
	max-width: 20ch;
}

.gb-phero--photo h1 { max-width: none; }

.gb-phero__art {
	justify-self: end;
	max-width: 44rem;
	width: 100%;
}

.gb-phero__art .gb-simwrap { margin-inline: auto 0; max-width: 36rem; }

@media (min-width: 900px) {
	.gb-phero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

/* Photo page hero: a paper hero with the photo mounted as a plate. */
.gb-phero--photo .gb-phero__bg {
	margin: 0 !important;
	max-width: none !important;
	outline: 1px solid var(--wp--preset--color--steel-500);
	outline-offset: 8px;
	overflow: hidden;
	z-index: 0;
}

.gb-phero--photo .gb-phero__bg img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.gb-pos-l img { object-position: 0 50%; }

.gb-pos-r img { object-position: 100% 50%; }

.gb-pos-t img { object-position: 50% 0; }

.gb-pos-b img { object-position: 50% 100%; }

@media (min-width: 900px) {
	.gb-phero--photo .gb-phero__bg {
		bottom: var(--wp--preset--spacing--30);
		left: calc(var(--gb-gutter) + (100% - var(--gb-gutter) * 2) * 0.56);
		position: absolute !important;
		right: var(--gb-gutter);
		top: var(--wp--preset--spacing--30);
	}

	.gb-phero--photo { padding-block: var(--wp--preset--spacing--40); }

	.gb-phero--photo .gb-phero__grid { min-height: calc(min(60vh, 36rem) - var(--wp--preset--spacing--40) * 2 - 1px); }

	.gb-phero--photo .gb-phero__text { max-width: 54%; }
}

@media (max-width: 899px) {
	.gb-phero--photo .gb-phero__bg {
		aspect-ratio: 16 / 10;
		margin-bottom: var(--wp--preset--spacing--40) !important;
		margin-inline: 8px !important;
		position: relative !important;
	}
}

/* Sticky sub-navigation + content (Capabilities page) */
.gb-subnav-layout { display: grid; gap: var(--wp--preset--spacing--50); }

.gb-subnav {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	list-style: none;
	margin: 0;
	padding: 0 !important;
	text-transform: uppercase;
}

.gb-subnav li { border-bottom: 1px solid var(--gb-line); }

.gb-subnav a {
	align-items: center;
	color: var(--gb-muted);
	display: flex;
	gap: 0.75rem;
	min-height: 24px;
	padding: 0.75rem 0;
	text-decoration: none;
	transition: color 0.15s;
}

/* The dash's space is always reserved, so labels never shift when it appears. */
.gb-subnav a::before {
	background: var(--gb-accent);
	content: "";
	flex: none;
	height: 1px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s var(--gb-ease);
	width: 1.25rem;
}

.gb-subnav a:hover,
.gb-subnav a.is-current { color: var(--gb-ink); }

.gb-subnav a.is-current::before,
.gb-subnav a:hover::before { transform: scaleX(1); }

@media (min-width: 1000px) {
	.gb-subnav-layout { align-items: start; grid-template-columns: 15rem minmax(0, 1fr); }

	.gb-subnav-layout > :first-child { position: sticky; top: calc(var(--gb-header-h) + 2rem); }
}

/* Phones and tablets: a sticky strip under the header. */
@media (max-width: 999px) {
	.gb-subnav-layout { gap: 0; }

	.gb-subnav-layout > :first-child {
		background: var(--gb-bg);
		border-bottom: 1px solid var(--gb-line);
		margin-inline: calc(var(--gb-pad) * -1) !important;
		padding-inline: var(--gb-pad);
		position: sticky;
		top: var(--gb-header-h);
		z-index: 5;
	}

	.admin-bar .gb-subnav-layout > :first-child { top: calc(var(--gb-header-h) + var(--wp-admin--admin-bar--height, 32px)); }

	.gb-subnav {
		display: flex;
		flex-wrap: nowrap;
		gap: 1.5rem;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.gb-subnav li { border: 0; flex: none; }

	.gb-subnav a::before { display: none; }

	.gb-subnav a { border-bottom: 2px solid transparent; padding-block: 0.85rem 0.7rem; }

	.gb-subnav a.is-current { border-bottom-color: var(--gb-accent-lg); }
}

/* Capability detail blocks */
.gb-capdetail {
	border-top: 1px solid var(--gb-line);
	display: grid;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--60);
	scroll-margin-top: calc(var(--gb-header-h) + 1rem);
}

.gb-capdetail h2 { max-width: 14ch; }

@media (min-width: 900px) {
	.gb-capdetail { align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

	.gb-capdetail > .is-style-eyebrow,
	.gb-capdetail > h2,
	.gb-capdetail > .gb-capdetail__body { grid-column: 1; }

	.gb-capdetail > figure { grid-column: 2; grid-row: 1 / span 3; }
}

.gb-capdetail__body > * + * {
	margin-top: 1em;
}

.gb-capdetail figure img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.gb-capdetail figure.gb-art img { aspect-ratio: auto; object-fit: contain; }

/* Big spec callout ("1.25″ Ø · 40″ per side") */
.gb-bigspec {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
}

.gb-bigspec > * {
	margin: 0 !important;
}

.gb-bigspec__item { border-left: 2px solid var(--wp--preset--color--blue); padding-left: var(--wp--preset--spacing--30); }

.gb-bigspec__item p:first-child {
	font-size: clamp(2.25rem, 1.2rem + 3vw, 4rem);
	font-stretch: 87.5%;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
	margin: 0;
}

.gb-bigspec__item p + p {
	color: var(--gb-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	margin: 0.5rem 0 0;
	text-transform: uppercase;
}

/* Leaders (Our team): static portraits, three up. */
.gb-leaders { display: grid; gap: var(--wp--preset--spacing--50); }

.gb-leaders > * {
	margin: 0 !important;
}

@media (min-width: 900px) {
	.gb-leaders { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.gb-leader {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.gb-leader > * {
	margin: 0 !important;
}

.gb-leader figure { margin-bottom: var(--wp--preset--spacing--20) !important; overflow: hidden; }

.gb-leader figure img {
	aspect-ratio: 4 / 5;
	filter: grayscale(1) contrast(1.05);
	object-fit: cover;
	object-position: 50% 30%;
	width: 100%;
}

.gb-leader h3 {
	font-size: var(--wp--preset--font-size--x-large);
	font-stretch: 87.5%;
	letter-spacing: -0.03em;
}

.gb-leader__role {
	color: var(--gb-accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* core/details as a bio drawer */
.gb-leader .wp-block-details {
	border-top: 1px solid var(--gb-line);
	margin-top: var(--wp--preset--spacing--20) !important;
	padding-top: 0.75rem;
}

.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.1em;
	list-style: none;
	min-height: 24px;
	text-transform: uppercase;
}

.wp-block-details summary::-webkit-details-marker { display: none; }

.wp-block-details summary::after { color: var(--gb-accent); content: " +"; }

.wp-block-details[open] summary::after { content: " \2212"; }

.wp-block-details[open] > :not(summary) { animation: gb-rise 0.4s var(--gb-ease) both; }

.wp-block-details > p {
	color: var(--gb-muted);
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0.9rem;
}

/* ---------------------------------------------------------------------------
 * 13. Contact, map, page list
 * ------------------------------------------------------------------------ */
.gb-contact { display: grid; gap: var(--wp--preset--spacing--60); }

@media (min-width: 900px) {
	.gb-contact { align-items: start; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }

	/* Request a quote: the form card first and wider, the aside sticks beside it. */
	.gb-contact--form-first { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }

	.gb-contact:not(.gb-contact--form-first) > :first-child,
	.gb-contact--form-first > :last-child { position: sticky; top: calc(var(--gb-header-h) + 2rem); }
}

.gb-contact__big a {
	color: inherit;
	display: inline-block;
	font-size: clamp(1.75rem, 1rem + 2.4vw, 3rem);
	font-stretch: 87.5%;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.1;
	overflow-wrap: anywhere;
	text-decoration: none;
}

.gb-contact__big a:hover { color: var(--gb-accent); }

/* Map facade as a site-plan sheet: graph paper with a major grid every four.
 * A real maps link always works; theme.js adds the embed button. */
.gb-map {
	background:
		linear-gradient(to right, rgb(122 118 110 / 0.34) 1px, transparent 1px) -1px -1px / 192px 192px,
		linear-gradient(to bottom, rgb(122 118 110 / 0.34) 1px, transparent 1px) -1px -1px / 192px 192px,
		linear-gradient(to right, rgb(122 118 110 / 0.14) 1px, transparent 1px) -1px -1px / 48px 48px,
		linear-gradient(to bottom, rgb(122 118 110 / 0.14) 1px, transparent 1px) -1px -1px / 48px 48px,
		var(--wp--preset--color--sheet);
	border: 1px solid var(--wp--preset--color--steel-500);
	box-sizing: border-box;
	display: grid;
	height: clamp(14rem, 28vw, 20rem);
	margin: 8px;
	outline: 1px solid var(--wp--preset--color--steel-200);
	outline-offset: 6px;
	padding: 1rem;
	place-items: center;
	position: relative;
	width: auto;
}

.gb-map iframe {
	border: 0;
	filter: grayscale(0.6) contrast(1.05);
	height: 100%;
	inset: 0;
	position: absolute;
	width: 100%;
}

.gb-map__pin {
	color: var(--wp--preset--color--graphite);
	display: grid;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	gap: 0.85rem;
	justify-items: center;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
}

.gb-map__pin > * {
	background: var(--wp--preset--color--sheet);
	margin: 0;
	padding: 0.2rem 0.5rem;
}

/* Static pin: a blue ring, no pulse. */
.gb-map__pin::before {
	background: var(--wp--preset--color--sheet);
	border: 2px solid var(--wp--preset--color--blue);
	border-radius: 50%;
	box-shadow: 0 0 0 6px rgb(0 115 188 / 0.15);
	content: "";
	height: 18px;
	width: 18px;
}

.gb-map__pin a { color: var(--wp--preset--color--blue-deep); }

.gb-map button {
	background: var(--wp--preset--color--blue);
	border: 0;
	color: var(--wp--preset--color--white);
	cursor: pointer;
	font: inherit;
	letter-spacing: 0.1em;
	min-height: 44px;
	padding: 0.85rem 1.25rem;
	text-transform: uppercase;
	transition: background-color 0.15s, color 0.15s;
}

.gb-map button:hover,
.gb-map button:focus-visible { background: var(--wp--preset--color--graphite); color: var(--wp--preset--color--white); }

/* Sitemap: the page list as hairline rows. */
.wp-block-page-list {
	border-top: 1px solid var(--gb-line-strong);
	list-style: none;
	margin: 0;
	padding: 0 !important;
}

.wp-block-page-list li {
	border-bottom: 1px solid var(--gb-line);
	margin: 0;
	padding: 0;
}

.wp-block-page-list a {
	color: var(--gb-ink);
	display: block;
	font-size: var(--wp--preset--font-size--large);
	font-stretch: 87.5%;
	font-weight: 600;
	letter-spacing: -0.015em;
	padding: 0.9rem 0;
	text-decoration: none;
}

.wp-block-page-list a:hover { color: var(--gb-accent); }

.wp-block-page-list ul {
	border-top: 1px solid var(--gb-line);
	list-style: none;
	margin: 0;
	padding: 0 0 0 1.5rem !important;
}

.wp-block-page-list ul li:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------------------
 * 14. Forms (Gravity Forms, light scheme): dark text on a sheet card,
 *     blue focus ring, redline only for validation.
 * ------------------------------------------------------------------------ */
.gform_wrapper {
	--gf-color-primary: var(--wp--preset--color--blue);
	--gf-color-primary-rgb: 0, 115, 188;
	--gf-color-primary-contrast: #fff;
	--gf-color-in-ctrl: transparent;
	--gf-color-in-ctrl-contrast: var(--wp--preset--color--graphite);
	--gf-color-danger: var(--wp--preset--color--redline);
	--gf-ctrl-border-color: var(--wp--preset--color--steel-500);
	--gf-ctrl-label-color-primary: var(--wp--preset--color--graphite);
	--gf-ctrl-label-color-secondary: var(--wp--preset--color--steel-600);
	--gf-ctrl-desc-color: var(--wp--preset--color--steel-600);
	--gf-radius: 0;
	--gf-font-family-base: var(--wp--preset--font-family--archivo);
	--gf-font-family-primary: var(--wp--preset--font-family--archivo);
	--gf-font-family-secondary: var(--wp--preset--font-family--archivo);
	--gf-font-family-tertiary: var(--wp--preset--font-family--archivo);
	--gf-ctrl-size-md: 3.25rem;
	color: var(--wp--preset--color--graphite);
}

.gform_wrapper .gform_title { display: none; }

.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label,
.gform_wrapper legend {
	color: var(--wp--preset--color--graphite) !important;
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: var(--wp--preset--font-size--x-small) !important;
	font-weight: 500 !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.gform_wrapper .gform-field-label--type-sub,
.gform_wrapper .ginput_complex label,
.gform_wrapper .gfield_description {
	color: var(--wp--preset--color--steel-600) !important;
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: 0.6875rem !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gform_wrapper .gfield_required { color: var(--wp--preset--color--blue-deep) !important; }

.gform_wrapper input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.gform_wrapper textarea,
.gform_wrapper select {
	background: rgb(255 255 255 / 0.7) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--steel-500) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--graphite) !important;
	font-family: var(--wp--preset--font-family--archivo) !important;
	font-size: 1.0625rem !important;
	padding: 0.8rem 0.5rem !important;
	transition: border-color 0.15s, background-color 0.15s;
	width: 100%;
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder { color: var(--wp--preset--color--steel-600) !important; opacity: 1; }

.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus,
.gform_wrapper input:focus-visible,
.gform_wrapper textarea:focus-visible,
.gform_wrapper select:focus-visible {
	background: var(--wp--preset--color--white) !important;
	border-bottom-color: var(--wp--preset--color--blue) !important;
	box-shadow: 0 1px 0 0 var(--wp--preset--color--blue) !important;
	outline: 2px solid var(--wp--preset--color--blue) !important;
	outline-offset: 2px !important;
}

.gform_wrapper input[type="file"] {
	background: rgb(255 255 255 / 0.5);
	border: 1px dashed var(--wp--preset--color--steel-500);
	box-sizing: border-box;
	color: var(--wp--preset--color--steel-600);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	max-width: 100%;
	padding: 1rem;
	width: 100%;
}

.gform_wrapper .ginput_container_fileupload { display: block !important; }

.gform_wrapper .gfield--type-fileupload input[type="file"] { display: block; width: 100% !important; }

.gform_wrapper .gfield--type-fileupload .gfield_description { display: block; margin-top: 0.5rem; }

.gform_wrapper input[type="file"]::file-selector-button {
	background: var(--wp--preset--color--graphite);
	border: 0;
	color: var(--wp--preset--color--paper);
	cursor: pointer;
	font: inherit;
	margin-right: 1rem;
	padding: 0.5rem 0.9rem;
	text-transform: uppercase;
}

/* Uploads: two by two from 900px (legacy markup sets these with more weight). */
@media (min-width: 900px) {
	.gform_wrapper ul.gform_fields {
		display: grid !important;
		gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.gform_wrapper ul.gform_fields > .gfield { grid-column: 1 / -1 !important; margin: 0 !important; }

	.gform_wrapper ul.gform_fields > .gfield--type-fileupload { grid-column: auto !important; }
}

.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button,
.gform_wrapper .gform_button {
	background: var(--wp--preset--color--blue) !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--wp--preset--color--white) !important;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: var(--wp--preset--font-size--x-small) !important;
	font-weight: 500 !important;
	letter-spacing: 0.1em !important;
	padding: 1.1rem 1.75rem !important;
	text-transform: uppercase;
	transition: background-color 0.15s, color 0.15s;
}

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.gform_wrapper .gform_button:focus-visible { background: var(--wp--preset--color--graphite) !important; color: var(--wp--preset--color--white) !important; }

.gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.gform_wrapper .gform_button:focus-visible { outline: 2px solid var(--wp--preset--color--blue) !important; outline-offset: 3px !important; }

/* Validation: redline text and rules on the card, never a pink panel. */
.gform_wrapper .gform_validation_errors,
.gform_wrapper .validation_message {
	background: transparent !important;
	border-color: var(--wp--preset--color--redline) !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--redline) !important;
}

.gform_wrapper .gform_validation_errors > h2,
.gform_wrapper .gform_validation_errors li,
.gform_wrapper .gform_validation_errors a { color: var(--wp--preset--color--redline) !important; }

.gform_wrapper .gfield_error { background: transparent !important; border: 0 !important; }

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select { border-bottom-color: var(--wp--preset--color--redline) !important; }

.gform_confirmation_message {
	border-left: 2px solid var(--wp--preset--color--blue);
	font-size: var(--wp--preset--font-size--large);
	padding-left: var(--wp--preset--spacing--30);
}

.gb-formcard {
	background: var(--wp--preset--color--sheet);
	border: 1px solid var(--wp--preset--color--steel-200);
	box-shadow: 0 1px 0 var(--wp--preset--color--steel-200), 0 30px 60px -40px rgb(var(--gb-ink-rgb) / 0.25);
	min-width: 0;
	padding: var(--wp--preset--spacing--50);
	position: relative;
}

.gb-formcard__title {
	font-size: var(--wp--preset--font-size--x-large);
	font-stretch: 87.5%;
	letter-spacing: -0.03em;
	margin-bottom: var(--wp--preset--spacing--30) !important;
}

.gb-formcard::before,
.gb-formcard::after {
	border-color: var(--wp--preset--color--blue);
	border-style: solid;
	content: "";
	height: 18px;
	position: absolute;
	width: 18px;
}

.gb-formcard::before {
	border-width: 1px 0 0 1px;
	left: -1px;
	top: -1px;
}

.gb-formcard::after {
	border-width: 0 1px 1px 0;
	bottom: -1px;
	right: -1px;
}

/* 320px reflow: tighter card, scaled reCAPTCHA. */
.gform_wrapper .ginput_recaptcha,
.gform_wrapper .gfield--type-captcha .ginput_container { max-width: 100%; }

@media (max-width: 479px) {
	.gb-formcard { padding: var(--wp--preset--spacing--40) 1rem; }

	.gform_wrapper .ginput_recaptcha,
	.gform_wrapper .gfield--type-captcha .ginput_container { transform: scale(0.82); transform-origin: 0 0; }

	.gform_wrapper .gfield--type-captcha { height: 5rem; overflow: hidden; }
}

/* ---------------------------------------------------------------------------
 * 15. CTA & footer
 *     One flat Gambit Blue band on every page. All text on it is pure white:
 *     5.03:1 on #0073BC; paper (4.4:1) and any tint would fail.
 * ------------------------------------------------------------------------ */
.gb-cta,
.gb-cta.is-style-section-raised {
	--gb-accent: var(--wp--preset--color--white);
	--gb-accent-lg: var(--wp--preset--color--white);
	--gb-muted: var(--wp--preset--color--white);
	--gb-line: rgb(255 255 255 / 0.4);
	--gb-line-strong: rgb(255 255 255 / 0.6);
	--gb-surface: var(--wp--preset--color--blue);
	--gb-bg: var(--wp--preset--color--blue);
	--gb-ink: var(--wp--preset--color--white);
	--gb-focus: var(--wp--preset--color--white);
	--gb-sweep: var(--wp--preset--color--graphite);
	--gb-sweep-ink: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--blue);
	border: 0;
	color: var(--wp--preset--color--white);
	isolation: isolate;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--70);
	position: relative;
}

/* Static drawing grid, fading in from the bottom-right. */
.gb-cta::before {
	background-image:
		linear-gradient(to right, rgb(255 255 255 / 0.16) 1px, transparent 1px),
		linear-gradient(to bottom, rgb(255 255 255 / 0.16) 1px, transparent 1px);
	background-position: -1px -1px;
	background-size: var(--gb-grid) var(--gb-grid);
	content: "";
	inset: 0;
	-webkit-mask-image: radial-gradient(120% 90% at 100% 100%, #000, transparent 70%);
	mask-image: radial-gradient(120% 90% at 100% 100%, #000, transparent 70%);
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.gb-cta h2 {
	font-size: calc(var(--wp--preset--font-size--title) * 0.9);
	font-stretch: 82%;
	letter-spacing: -0.03em;
	line-height: 0.95;
	max-width: 14ch;
	word-spacing: 0.14em;
}

.gb-cta__grid { display: grid; gap: var(--wp--preset--spacing--50); }

.gb-cta__grid > * {
	margin: 0 !important;
}

@media (min-width: 900px) {
	.gb-cta__grid { align-items: end; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); }
}

/* Primary button on blue: white fill, ink text; hover to ink. */
.gb-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link { background-color: var(--wp--preset--color--white); color: var(--wp--preset--color--graphite); }

.gb-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.gb-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible { background-color: var(--wp--preset--color--graphite); color: var(--wp--preset--color--white); }

.gb-cta .is-style-outline .wp-block-button__link:hover,
.gb-cta .is-style-outline .wp-block-button__link:focus-visible { background-color: var(--wp--preset--color--white); color: var(--wp--preset--color--blue-deep); }

.gb-cta a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--white); }

/* Footer: an inked title block with hairline cells. */
footer.wp-block-template-part { background: var(--wp--preset--color--graphite); }

.gb-footer {
	border-top: 0;
	color: var(--wp--preset--color--steel-400);
	font-size: var(--wp--preset--font-size--small);
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
}

.gb-footer h2 {
	color: var(--wp--preset--color--steel-400);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-stretch: 100%;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.4;
	margin-bottom: var(--wp--preset--spacing--20);
	text-transform: uppercase;
	word-spacing: 0;
}

.gb-footer p { color: var(--wp--preset--color--paper); }

.gb-footer .gb-footer__grid > :first-child p,
.gb-footer .gb-footer__base p { color: var(--wp--preset--color--steel-400); }

.gb-footer a { color: var(--wp--preset--color--paper); text-decoration: none; }

.gb-footer a:hover { color: var(--wp--preset--color--blue-bright); }

.gb-footer .wp-block-site-logo img { width: 150px; }

.gb-footer__grid {
	background: var(--wp--preset--color--steel-800);
	border: 1px solid var(--wp--preset--color--steel-800);
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.gb-footer__grid > * {
	background: var(--wp--preset--color--graphite);
	margin: 0 !important;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.gb-footer__links {
	list-style: none;
	margin: 0;
	padding: 0 !important;
}

.gb-footer__links li + li { margin-top: 0.3rem; }

@media (min-width: 900px) {
	.gb-footer__links { column-gap: 1.5rem; columns: 2; }

	.gb-footer__links li {
		break-inside: avoid;
		margin-top: 0 !important;
		padding-bottom: 0.3rem;
	}
}

.gb-footer__base {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	margin-top: var(--wp--preset--spacing--30) !important;
	padding-top: var(--wp--preset--spacing--20);
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * 16. Placeholders
 *
 * "[NEEDS CONTENT …]" markers for content the current site doesn't have.
 * Deliberately off-palette so they get found. Search the site for "[NEEDS"
 * before launch. Light: 6.95:1 worst case; dark screens: 10.35:1.
 * ------------------------------------------------------------------------ */
.gb-needs-content {
	background: repeating-linear-gradient(-45deg, rgb(255 184 0 / 0.12) 0 10px, transparent 10px 20px);
	border: 1px dashed #8A5A00;
	color: #6B4600;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	padding: 0.75rem 1rem;
}

.gb-hero2 .gb-needs-content,
.gb-band .gb-needs-content,
.gb-footer .gb-needs-content,
.is-style-instrument .gb-needs-content { border-color: #FFB800; color: #FFB800; }

.gb-cta .gb-needs-content {
	background: var(--wp--preset--color--graphite);
	border-color: #FFB800;
	color: #FFB800;
}

.gb-photo-needed {
	align-items: center;
	aspect-ratio: 4 / 3;
	display: flex;
	justify-content: center;
	text-align: center;
}

.gb-photo-needed p { margin: 0; }

/* ---------------------------------------------------------------------------
 * 17. Motion (all finite) & editor canvas
 * ------------------------------------------------------------------------ */

/* Page-to-page crossfade (Chromium, Safari 18+). */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.3s; }

/* Scroll reveals */
.gb-motion .gb-reveal { transition: opacity 0.7s var(--gb-ease), transform 0.7s var(--gb-ease); }

.gb-motion .gb-reveal:not(.is-visible) { opacity: 0; transform: translateY(20px); }

.gb-motion .gb-reveal:not(.is-visible) .is-style-eyebrow::before { transform: scaleX(0); }

.gb-motion .gb-stagger > * {
	transition: opacity 0.7s var(--gb-ease), transform 0.7s var(--gb-ease);
}

.gb-motion .gb-stagger:not(.is-visible) > * {
	opacity: 0;
	transform: translateY(20px);
}

.gb-motion .gb-stagger > *:nth-child(2) { transition-delay: 0.06s; }
.gb-motion .gb-stagger > *:nth-child(3) { transition-delay: 0.12s; }
.gb-motion .gb-stagger > *:nth-child(4) { transition-delay: 0.18s; }
.gb-motion .gb-stagger > *:nth-child(5) { transition-delay: 0.24s; }
.gb-motion .gb-stagger > *:nth-child(6) { transition-delay: 0.3s; }
.gb-motion .gb-stagger > *:nth-child(n+7) { transition-delay: 0.36s; }

/* Image wipe: photos uncover left-to-right as they enter. */
.gb-motion .gb-wipe img { transition: clip-path 1.1s var(--gb-ease-io), transform 1.3s var(--gb-ease); }

.gb-motion .gb-wipe:not(.is-visible) img { clip-path: inset(0 100% 0 0); transform: scale(1.08); }

/* Split headline (Home H1 only): words rise out of a mask. */
.gb-w {
	display: inline-block;
	margin-bottom: -0.1em;
	overflow: hidden;
	padding-bottom: 0.1em;
	vertical-align: top;
}

.gb-w > span { display: inline-block; }

.gb-motion .gb-split-words .gb-w > span { animation: gb-word-up 0.9s var(--gb-ease) both; animation-delay: calc(var(--i, 0) * 70ms + 150ms); }

@keyframes gb-word-up {
	from { transform: translateY(110%); }
	to { transform: none; }
}

/* While JS is splitting, hide the raw headline; the failsafe reveals it anyway. */
.gb-js .gb-split-words:not(.is-split) { animation: gb-failsafe 0s 1.5s forwards; opacity: 0; }

@keyframes gb-failsafe {
	to { opacity: 1; }
}

@keyframes gb-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

.gb-hero2__inner > :not(h1, .is-style-eyebrow),
.gb-phero__text > :not(h1) { animation: gb-rise 0.8s var(--gb-ease) 0.45s both; }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-delay: 0s !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* Editor canvas: never hide content while editing; hero photos stay selectable. */
.editor-styles-wrapper .gb-reveal,
.editor-styles-wrapper .gb-stagger > *,
.editor-styles-wrapper .gb-split-words { opacity: 1 !important; transform: none !important; }

.editor-styles-wrapper .gb-phero--photo .gb-phero__bg { pointer-events: auto; z-index: 1; }

.editor-styles-wrapper .gb-hero2,
.editor-styles-wrapper .gb-phero { overflow: visible; }

.editor-styles-wrapper .gb-hero2::before,
.editor-styles-wrapper .gb-phero::before,
.editor-styles-wrapper .gb-cta::before { pointer-events: none; }

.editor-styles-wrapper .gb-sim:empty { min-height: 8rem; }

/* ==========================================================================
   Polish pass (Oct 2026): small finishing touches. Safe to remove as a block.
   ========================================================================== */

/* Text selection in Gambit Blue. */
::selection { background: var(--wp--preset--color--blue); color: #fff; }

/* Big spec figures (e.g. gun drilling): one even row instead of a 2 + 1 orphan. */
@media (min-width: 600px) {
	.gb-bigspec { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
	.gb-capdetail .gb-bigspec__item p:first-child { font-size: clamp(2rem, 1rem + 2.2vw, 3.25rem); }
}

@media (prefers-reduced-motion: no-preference) {
	/* Leadership portraits: grayscale at rest, colour on hover/focus. */
	.gb-leader figure img { transition: filter 0.6s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
	.gb-leader:hover figure img,
	.gb-leader:focus-within figure img { filter: grayscale(0) contrast(1.02); transform: scale(1.025); }

	/* Gallery tiles: slow push-in on hover. */
	.wp-block-gallery.gb-gallery > .wp-block-image img { transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
	.wp-block-gallery.gb-gallery > .wp-block-image:hover img { transform: scale(1.04); }
}

/* Header dropdowns: core right-aligns submenus in a right-justified nav, so "About"
   hung out under Quality/Gallery. Anchor it to its own item, text lined up. */
@media (min-width: 600px) {
	.gb-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
		left: -13px !important;
		right: auto !important;
	}
}