/* ==========================================================================
   Chrome: eyebrow bar, header bar, primary navigation, footer.

   Desktop (>= 1120px): horizontal menu; items with children open
   full-width mega panels (hover, focus or the chevron button).
   Below 1120px: the menu button opens the same <nav> as a drawer and the
   panels become accordions.
   Without JS: the header sits in the page flow and the menu renders as a
   plain list (narrow) or opens panels on hover/focus (desktop).

   Nothing that contains the drawer may set transform, filter or
   backdrop-filter: that would turn it into the drawer's containing block.
   The frosted background lives on .header-bar::before for that reason.
   ========================================================================== */

.header-wrap {
	width: 100%;
	max-width: 1680px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 3vw, 3rem);
}

.site-header {
	position: relative;
	z-index: 1001;
	background: var(--color-bg-alt);
}

.js .site-header {
	position: fixed;
	inset: 0 0 auto;
	background: none;
}

/* Eyebrow bar ------------------------------------------------------------ */

.eyebrow-bar {
	position: relative;
	z-index: 2;
	max-height: 6rem;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.72);
	border-bottom: 1px solid var(--color-border);
	font-size: 0.8rem;
	color: var(--color-text-muted);
	transition: max-height var(--transition), visibility 0s linear 0s;
}

.is-scrolled .eyebrow-bar {
	max-height: 0;
	visibility: hidden;
	border-bottom-width: 0;
	transition: max-height var(--transition), visibility 0s linear 0.35s;
}

.eyebrow-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	min-height: 2.5rem;
}

.eyebrow-bar__scope {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
	margin: 0;
	font-size: 0.9rem;
	letter-spacing: 0.08em;
	color: var(--color-text);
}

.eyebrow-bar__scope > span:first-of-type {
	padding-block: 0.35rem;
	line-height: 1.35;
}

.eyebrow-bar__scope .eyebrow-icon {
	flex-shrink: 0;
	width: 22px;
	height: 14px;
	color: var(--color-eyebrow);
	fill: currentColor;
}

.eyebrow-bar__base {
	padding-left: 0.9rem;
	border-left: 1px solid var(--color-border-strong);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--color-text-muted);
	white-space: nowrap;
}

.eyebrow-bar__links {
	display: flex;
	flex-shrink: 0;
	gap: 0.25rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eyebrow-bar__links a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 2.5rem;
	color: var(--color-text);
	font-weight: 500;
	text-decoration: none;
}

.eyebrow-bar__links a:hover {
	color: var(--color-eyebrow);
}

.eyebrow-bar__links .icon {
	width: 15px;
	height: 15px;
	color: var(--color-eyebrow);
}

/* Header bar ------------------------------------------------------------- */

.header-bar {
	position: relative;
}

.header-bar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
	transition: background-color var(--transition), border-color var(--transition);
	border-bottom: 1px solid transparent;
}

.is-scrolled .header-bar::before,
.nav-open .header-bar::before,
.mega-open .header-bar::before {
	background: rgba(8, 11, 16, 0.92);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom-color: var(--color-border);
}

.header-bar__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 5.25rem;
	transition: min-height var(--transition);
}

.is-scrolled .header-bar__inner {
	min-height: 4.25rem;
}

/* The logo is drawn larger than the bar is tall. It sits at the top of the
   bar and the negative bottom margin keeps it from stretching the bar, so
   its lower edge hangs past the bar over the page (and over an open mega
   panel). --logo-h is the drawn height; the bar's min-height is unchanged. */
.site-logo {
	--logo-h: 72px;
	position: relative;
	z-index: 3;
	flex-shrink: 0;
	display: block;
	align-self: flex-start;
	margin-top: 1.1rem;
	margin-bottom: -2.5rem;
	line-height: 0;
	text-decoration: none;
	border-radius: 6px;
}

.site-logo .logo-svg,
.site-logo .custom-logo {
	display: block;
	width: auto;
	height: calc(var(--logo-h) * var(--logo-scale, 1));
	max-width: min(380px, 60vw);
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
	transition: height var(--transition);
}

/* Inline SVG clips to its own box by default; the dig cycle swings the
   bucket below the artwork's frame, so let it draw past the edge (the
   logo already sits above the bar on its own layer). */
.logo-svg {
	overflow: visible;
}

.footer-logo .custom-logo {
	display: block;
	width: 14rem;
	height: auto;
}

/* Compact bar (4.25rem): the logo shrinks to sit inside it with clear
   space above and below instead of hanging past the edge. */
.is-scrolled .site-logo {
	--logo-h: 50px;
	margin-top: 0.55rem;
}

.is-scrolled .site-logo .logo-svg {
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
}

/* The arm's rig groups rotate about their pins (set by logo-rig.js in
   SVG units); the mark itself only fades in so the rig never fights a
   CSS transform. */
.js .site-logo .logo-bucket {
	animation: logoMarkIn 0.6s 0.1s var(--ease) both;
}

.js .site-logo .logo-text {
	animation: logoPartIn 0.7s 0.35s var(--ease) both;
}

.js .site-logo .logo-subtext {
	animation: logoPartIn 0.7s 0.55s var(--ease) both;
}

.logo-svg .exc-swing,
.logo-svg .exc-boom,
.logo-svg .exc-stick,
.logo-svg .exc-bucket {
	transform-box: view-box;
}

@keyframes logoMarkIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes logoPartIn {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.site-logo:hover .logo-text,
.site-logo:focus-visible .logo-text {
	filter: drop-shadow(0 0 8px var(--color-accent-glow));
}

.header-actions {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.75rem;
	margin-left: auto;
}

/* "Contact Us": an uppercase display-face text link with an arrow, in the
   header bar and the nav drawer (the only call to action in the chrome). */
.text-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 44px;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text);
	text-decoration: none;
	white-space: nowrap;
}

.text-cta:hover,
.text-cta:focus-visible {
	color: var(--color-accent-yellow);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.text-cta .icon {
	width: 16px;
	height: 16px;
	transition: transform var(--transition);
}

.text-cta:hover .icon {
	transform: translateX(3px);
}

.header-cta {
	padding-inline: 0.4rem;
	font-size: 1.05rem;
}

.btn--sm {
	min-height: 44px;
	padding: 0.6rem 1.2rem;
	font-size: 0.92rem;
}

/* Menu button ------------------------------------------------------------ */

.nav-trigger {
	display: none;
}

.js .nav-trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid var(--color-border-strong);
	border-radius: 12px;
	color: var(--color-text);
	cursor: pointer;
	transition: background var(--transition);
}

.nav-trigger:hover {
	background: var(--color-surface);
}

.nav-trigger__bars {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.nav-trigger__bars span {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--transition), opacity var(--transition);
}

.nav-trigger[aria-expanded="true"] .nav-trigger__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-trigger[aria-expanded="true"] .nav-trigger__bars span:nth-child(2) { opacity: 0; }
.nav-trigger[aria-expanded="true"] .nav-trigger__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-trigger__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Menu: shared ----------------------------------------------------------- */

.nav-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-item {
	display: flex;
	align-items: center;
}

.nav-link {
	display: inline-flex;
	align-items: center;
	color: var(--color-text-muted);
	font-weight: 600;
	text-decoration: none;
	transition: color var(--transition);
}

.nav-link:hover,
.nav-link:focus-visible,
.is-current > .nav-link,
.is-current > .nav-item > .nav-link {
	color: var(--color-text);
}

.mega-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 8px;
	color: var(--color-text-muted);
	cursor: pointer;
}

.mega-toggle:hover {
	color: var(--color-text);
	background: rgba(255, 255, 255, 0.06);
}

.mega-toggle .icon {
	transition: transform var(--transition);
}

.mega-toggle[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

.mega-toggle[aria-expanded="true"] {
	color: var(--color-eyebrow);
}

.mega__title {
	margin: 0 0 0.5rem;
	font-size: 1.9rem;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--color-text);
}

.mega__lead {
	margin: 0 0 1.25rem;
	color: var(--color-text-muted);
	line-height: 1.6;
}

.mega__overview,
.mega-aside__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-link);
	font-weight: 600;
	text-decoration: none;
}

.mega__overview:hover,
.mega-aside__link:hover {
	color: var(--color-link-hover);
	text-decoration: underline;
}

.mega__tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mega-tile {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	height: 100%;
	padding: 1rem 1.1rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	color: var(--color-text);
	text-decoration: none;
	transition: border-color var(--transition), background-color var(--transition), transform var(--transition);
}

.mega-tile:hover,
.mega-tile:focus-visible,
.is-current > .mega-tile {
	background: var(--color-surface-hi);
	border-color: rgba(212, 230, 0, 0.45);
}

.mega-tile__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: var(--color-accent-dim);
	border: 1px solid rgba(127, 163, 255, 0.25);
	border-radius: 10px;
	color: var(--color-eyebrow);
}

.mega-tile__icon .icon {
	width: 24px;
	height: 24px;
}

.mega-tile__icon .eyebrow-icon {
	width: 30px;
	height: 20px;
	fill: currentColor;
}

.mega-tile__body {
	display: grid;
	gap: 0.2rem;
}

.mega-tile__title {
	font-weight: 600;
	line-height: 1.3;
}

.mega-tile__desc {
	font-size: 0.87rem;
	line-height: 1.45;
	color: var(--color-text-muted);
}

.mega-aside {
	display: grid;
	align-content: start;
	gap: 0.85rem;
	padding: 1.25rem;
	background: linear-gradient(160deg, var(--color-surface-hi), var(--color-surface));
	border: 1px solid var(--color-border);
	border-radius: 12px;
}

/* US deployment map (inc/us-map.php). Stroke widths are in map units
   (975 wide), so each context sets --map-line for its rendered size. */

.us-map {
	--map-line: 1.4;
	line-height: 0;
}

.us-map__svg {
	display: block;
	width: 100%;
	height: auto;
}

.us-map__nation {
	fill: #111a29;
	stroke: rgba(127, 163, 255, 0.35);
	stroke-width: calc(var(--map-line) * 1.4);
	stroke-linejoin: round;
}

.us-map__state.is-visited {
	fill: rgba(51, 75, 144, 0.85);
}

.us-map__state.is-home {
	fill: rgba(212, 230, 0, 0.28);
	stroke: var(--color-accent-yellow);
	stroke-width: calc(var(--map-line) * 1.2);
	stroke-linejoin: round;
}

.us-map__borders {
	stroke: rgba(127, 163, 255, 0.22);
	stroke-width: var(--map-line);
	stroke-linejoin: round;
}

.us-map__arc {
	fill: none;
	stroke: rgba(212, 230, 0, 0.7);
	stroke-width: calc(var(--map-line) * 1.3);
	stroke-linecap: round;
}

.us-map__dot {
	fill: var(--color-accent-yellow);
	stroke: #0b1018;
	stroke-width: calc(var(--map-line) * 1.5);
}

.us-map__ring {
	fill: none;
	stroke: var(--color-accent-yellow);
	stroke-width: var(--map-line);
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

/* Footprint pins (Company Info states with no project listed): hollow dot. */
.us-map__pin--footprint .us-map__dot {
	fill: #0b1018;
	stroke: var(--color-accent-yellow);
	stroke-width: calc(var(--map-line) * 1.6);
}

.us-map__home-dot {
	fill: #fff;
	stroke: var(--color-accent-yellow);
	stroke-width: calc(var(--map-line) * 2.4);
}

.us-map__home-ring {
	fill: rgba(212, 230, 0, 0.18);
	stroke: rgba(212, 230, 0, 0.6);
	stroke-width: var(--map-line);
}

.us-map__label {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	fill: var(--color-text);
	paint-order: stroke;
	stroke: rgba(0, 0, 0, 0.85);
	stroke-width: 4px;
	stroke-linejoin: round;
}

.us-map__label--home {
	fill: var(--color-accent-yellow);
}

@media (prefers-reduced-motion: no-preference) {
	.us-map__ring {
		animation: mapRing 2.8s ease-out infinite;
	}

	.us-map__pin:nth-child(2n) .us-map__ring { animation-delay: 0.7s; }
	.us-map__pin:nth-child(3n) .us-map__ring { animation-delay: 1.4s; }
	.us-map__pin:nth-child(5n) .us-map__ring { animation-delay: 2.1s; }

	.us-map__arc {
		stroke-dasharray: 0.035 0.02;
		animation: mapFlow 2.4s linear infinite;
	}
}

@keyframes mapRing {
	0% { opacity: 0.9; transform: scale(0.6); }
	80%, 100% { opacity: 0; transform: scale(2.1); }
}

@keyframes mapFlow {
	to { stroke-dashoffset: -0.055; }
}

/* In the Federal mega panel: arcs draw in when the panel opens. */

.mega-aside__map {
	--map-line: 3.2;
	margin: -0.25rem -0.25rem 0;
}

@media (prefers-reduced-motion: no-preference) {
	.mega-aside__map .us-map__arc {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
		animation: none;
		transition: stroke-dashoffset 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.has-mega.is-open .mega-aside__map .us-map__arc,
	html:not(.js) .has-mega:hover .mega-aside__map .us-map__arc {
		stroke-dashoffset: 0;
	}

	.mega-aside__map .us-map__arc:nth-child(2) { transition-delay: 0.08s; }
	.mega-aside__map .us-map__arc:nth-child(3) { transition-delay: 0.16s; }
	.mega-aside__map .us-map__arc:nth-child(4) { transition-delay: 0.24s; }
	.mega-aside__map .us-map__arc:nth-child(5) { transition-delay: 0.32s; }
	.mega-aside__map .us-map__arc:nth-child(n + 6) { transition-delay: 0.4s; }
}

.mega-aside__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

.mega-aside__stats strong {
	font-size: 1.25rem;
	color: var(--color-eyebrow);
}
.mega-aside__label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-eyebrow);
}

.mega-aside__area {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--color-text);
}

.mega-aside__phone,
.site-nav__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-text);
	font-weight: 600;
	text-decoration: none;
}

.mega-aside__phone .icon,
.site-nav__phone .icon {
	color: var(--color-eyebrow);
}

.site-nav__contact {
	display: none;
}

/* Desktop: horizontal bar + mega panels --------------------------------- */

@media (min-width: 1120px) {
	.js .nav-trigger,
	.site-nav__contact {
		display: none;
	}

	.site-nav {
		margin-left: auto;
	}

	.nav-menu {
		display: flex;
		align-items: center;
		gap: 0.15rem;
	}

	.nav-menu > li {
		position: static;
	}

	.nav-link {
		position: relative;
		min-height: 44px;
		padding: 0.55rem 0.9rem;
		font-size: 1.1rem;
	}

	.has-mega .nav-link {
		padding-right: 0.2rem;
	}

	.nav-link::after {
		content: "";
		position: absolute;
		left: 0.9rem;
		right: 0.9rem;
		bottom: 0.3rem;
		height: 2px;
		background: var(--color-accent-yellow);
		border-radius: 2px;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--transition);
	}

	.has-mega .nav-link::after {
		right: 0.2rem;
	}

	.nav-link:hover::after,
	.is-current > .nav-link::after,
	.is-current > .nav-item > .nav-link::after,
	.has-mega.is-open > .nav-item > .nav-link::after {
		transform: scaleX(1);
	}

	.header-actions {
		margin-left: 0.5rem;
	}

	.mega {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-6px);
		background: #080b10;
		border-top: 1px solid var(--color-border);
		border-bottom: 1px solid var(--color-border-strong);
		box-shadow: 0 30px 60px rgba(0, 0, 0, 0.65);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	}

	.has-mega.is-open > .mega,
	html:not(.js) .has-mega:hover > .mega,
	html:not(.js) .has-mega:focus-within > .mega {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
	}

	.mega__inner {
		display: grid;
		grid-template-columns: minmax(220px, 1fr) minmax(0, 2.3fr) minmax(240px, 1fr);
		gap: clamp(1.5rem, 3vw, 3rem);
		padding-block: 2.25rem 2.5rem;
	}

	.mega__tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-content: start;
	}
}

@media (min-width: 1120px) and (max-width: 1279px) {
	.nav-link {
		padding-inline: 0.65rem;
		font-size: 1rem;
	}

	.site-logo {
		--logo-h: 63px;
	}
}

/* Drawer: below 1120px -------------------------------------------------- */

@media (max-width: 1119.98px) {
	.site-nav {
		padding: 1rem var(--gutter) 2rem;
		border-top: 1px solid var(--color-border);
	}

	.js .site-nav {
		position: fixed;
		inset: 0;
		z-index: -2;
		display: flex;
		flex-direction: column;
		gap: 2rem;
		padding: calc(var(--header-bottom, 8rem) + 1rem) clamp(1.25rem, 3vw, 3rem) 2.5rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--color-bg);
		border: 0;
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.25s ease;
	}

	.js .site-nav.is-open {
		visibility: visible;
		opacity: 1;
	}

	.nav-menu {
		display: grid;
		gap: 0.25rem 2rem;
	}

	.nav-menu > li {
		border-bottom: 1px solid var(--color-border);
	}

	.nav-item {
		justify-content: space-between;
	}

	.nav-link {
		min-height: 56px;
		padding: 0.5rem 0;
		font-size: clamp(1.3rem, 3.4vw, 1.75rem);
		letter-spacing: -0.01em;
	}

	.mega-toggle {
		width: 48px;
		height: 48px;
		border: 1px solid var(--color-border-strong);
	}

	.mega-toggle .icon {
		width: 22px;
		height: 22px;
	}

	.js .mega {
		display: none;
	}

	.js .has-mega.is-open > .mega {
		display: block;
	}

	.mega__inner {
		padding: 0 0 1.25rem;
	}

	.mega__intro,
	.mega-aside {
		display: none;
	}

	.mega-tile {
		padding: 0.85rem 1rem;
	}

	.eyebrow-bar__base {
		display: none;
	}

	.site-nav__contact {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 1rem 1.75rem;
	}

	.header-bar__inner {
		min-height: 4.5rem;
	}

	.site-logo {
		--logo-h: 63px;
		margin-top: 0.75rem;
	}

	.is-scrolled .site-logo {
		--logo-h: 50px;
		margin-top: 0.55rem;
	}
}

/* Tablet: two-column drawer for the plain links */

@media (min-width: 700px) and (max-width: 1119.98px) {
	.nav-menu {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nav-menu > .has-mega {
		grid-column: 1 / -1;
	}

	.mega__tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 699.98px) {
	.eyebrow-bar {
		font-size: 0.72rem;
	}

	.header-cta {
		display: none;
	}
}

@media (max-width: 420px) {
	.eyebrow-bar__links span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* Icon-only phone link keeps a 40px target. */
	.eyebrow-bar__links a {
		justify-content: center;
		min-width: 2.5rem;
		margin-inline: -0.5rem;
	}
}

/* Footer ----------------------------------------------------------------- */

/* Every page: a low view along the shored cut to the conduit reel
   (CamFooterLow). The render's top third is sky, so the image sits low in
   the box and the scrim opens with a solid run of the page colour that
   fades out over the upper part of the footer: no hard edge against the
   section above it. No border: a border sits outside the scrim's box, so
   even a transparent one showed a line of the photo. */
.site-footer {
	position: relative;
	isolation: isolate;
	background: #0a0908 url("../img/trench/worksite-footer-low.webp") center 62% / cover no-repeat;
	border-top: 0;
	font-size: 0.92rem;
	color: var(--color-text-muted);
}

/* Scrim over the photo so footer text keeps AA contrast; it darkens
   toward the bottom of the page. */
.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0.75) 22%, rgba(0, 0, 0, 0) 58%),
		linear-gradient(180deg, rgba(6, 6, 7, 0.5) 0, rgba(6, 6, 7, 0.55) 55%, rgba(6, 6, 7, 0.8) 100%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.55) 100%),
		rgba(0, 0, 0, 0.45);
	pointer-events: none;
}

@media (max-width: 899px) {
	.site-footer {
		background: #0a0908 url("../img/trench/worksite-footer-low-mobile.webp") center 30% / cover no-repeat;
	}

	.site-footer::before {
		background:
			linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0.75) 10%, rgba(0, 0, 0, 0) 30%),
			linear-gradient(180deg, rgba(6, 6, 7, 0.5) 0, rgba(6, 6, 7, 0.55) 55%, rgba(6, 6, 7, 0.8) 100%),
			linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.55) 100%),
			rgba(0, 0, 0, 0.45);
	}
}

/* WebGL soil lighting (assets/js/ground.js); decorative, never interactive. */
.ground-canvas {
	display: block;
	width: 100%;
	z-index: -2;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.9s ease;
}

.ground-canvas.is-ready {
	opacity: 1;
}

.ground-canvas--sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	margin-bottom: -100vh;
}

.ground-canvas--fill {
	position: absolute;
	inset: 0;
	height: 100%;
}

/* Service groups on the far left, the wordmark on the far right in the same
   row. Each group lays its links out in two rows, so they run across in two
   or three short columns and the footer stays shallow. */
.footer-main {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1.5rem 3rem;
	padding-block: 2rem 1.5rem;
}

.footer-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex-shrink: 0;
	margin-left: auto;
	text-align: right;
}

.footer-logo {
	display: block;
	line-height: 0;
}

.footer-logo svg {
	display: block;
	width: 14rem;
	height: auto;
}

.footer-social {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.25rem 1.25rem;
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
}

.footer-social a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--color-text-muted);
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.footer-social a:hover,
.footer-social a:focus-visible {
	color: var(--color-eyebrow);
}

.footer-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 3.5rem;
}

.footer-heading,
.credentials__title {
	margin: 0 0 0.7rem;
	font-size: 1.02rem;
	letter-spacing: 0.14em;
	color: var(--color-eyebrow);
}

.footer-heading a {
	display: inline-flex;
	align-items: center;
	min-height: 1.5rem;
	margin-block: -0.25rem;
	color: inherit;
	text-decoration: none;
}

.footer-heading a:hover,
.footer-heading a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.footer-links {
	--rows: 2;
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--rows), auto);
	gap: 0.4rem 2.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Set by made_traxx_footer_nav() when a group has more than six links. */
.footer-links--rows-3 { --rows: 3; }
.footer-links--rows-4 { --rows: 4; }

.footer-links a {
	display: inline-block;
	padding-block: 0.2rem;
	margin-block: -0.2rem;
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--transition);
}

.footer-links a:hover,
.footer-links a:focus-visible,
.footer-links a[aria-current="page"] {
	color: var(--color-text);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.contact-details {
	display: grid;
	gap: 0.6rem;
}

.contact-detail {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	color: var(--color-text-muted);
}

.contact-detail .icon {
	flex-shrink: 0;
	margin-top: 0.2rem;
	color: var(--color-eyebrow);
}

.contact-detail a {
	color: var(--color-text);
}

.credentials__list {
	display: grid;
	gap: 0.6rem;
}

.credential dt {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.credential dd {
	color: var(--color-text);
}

.footer-credentials {
	padding-block: 1.25rem;
	border-top: 1px solid var(--color-border);
}

.footer-credentials .credentials {
	display: grid;
	grid-template-columns: minmax(16rem, 1fr) 3fr;
	gap: 1rem 4rem;
	align-items: start;
}

.footer-credentials .credentials__title {
	margin: 0.15rem 0 0;
}

.footer-credentials .credentials__list {
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 1rem 2rem;
	margin: 0;
}

.footer-credentials .credential dd {
	margin: 0.2rem 0 0;
	font-size: 0.88rem;
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	padding-block: 1.1rem 1.5rem;
	border-top: 1px solid var(--color-border);
	font-size: 0.82rem;
}

.footer-bottom p {
	margin: 0;
}

.subtle-branding a {
	color: inherit;
}

@media (max-width: 899.98px) {
	.footer-credentials .credentials {
		grid-template-columns: 1fr;
	}

	.footer-main {
		flex-direction: column;
		gap: 1.75rem;
	}

	.footer-nav {
		width: 100%;
	}

	.footer-brand {
		align-items: flex-start;
		margin-left: 0;
		text-align: left;
	}

	.footer-social {
		justify-content: flex-start;
	}
}

@media (max-width: 699.98px) {
	.footer-nav {
		flex-direction: column;
		gap: 1.5rem;
	}

	.footer-links {
		grid-auto-flow: row;
		grid-template-rows: none;
		grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
		gap: 0.4rem 1.25rem;
	}
}