/* ==========================================================================
   Sections: built from mockup-timeline (index.html + inner pages).
   Page content is core blocks; these classes are set as block classNames.
   ========================================================================== */

/* Section headings ------------------------------------------------------- */

/* Section label: the condensed uppercase eyebrow over a section title, in
   the eyebrow blue with no marker in front of it. */
.section-label {
	display: inline-block;
	font-size: 1.08rem;
	letter-spacing: 0.14em;
	color: var(--color-eyebrow);
	margin-bottom: 0.8rem;
}

.section-title {
	font-size: clamp(2.1rem, 4.6vw, 3.5rem);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.05;
	margin-bottom: 1rem;
}

.section-subtitle {
	color: var(--color-text-muted);
	font-size: 1.05rem;
	line-height: 1.7;
	max-width: 80ch;
}

.section-header {
	text-align: center;
	margin-bottom: 3.5rem;
}

.section-header .section-subtitle {
	margin-inline: auto;
}

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

.hero {
	position: relative;
	z-index: 3;
	isolation: isolate;
	overflow: hidden;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 9rem var(--gutter) 6rem;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
	/* The crew at a cable reel, framed on the M.A.D.E shirt. A darker ellipse
	   sits behind the centred copy so it reads over the hi-vis yellow. */
	background:
		radial-gradient(ellipse 52% 42% at 50% 52%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.32) 60%, rgba(0, 0, 0, 0) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.62) 75%, rgba(10, 10, 10, 0.92) 100%),
		url("../img/bg-hero.jpg") center 62% / cover no-repeat;
}

.hero-badge {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem 0.5rem;
	font-size: 0.9rem;
	letter-spacing: 0.14em;
	color: var(--color-eyebrow);
	border: 1px solid rgba(127, 163, 255, 0.32);
	border-radius: 100px;
	padding: 0.4rem 1.2rem;
	margin-bottom: 2rem;
}

.hero-badge > span {
	white-space: nowrap;
}

.hero-badge .sep {
	margin-left: 0.15em;
}

/* The H1 breaks at the sentence: line 1 is the statement, the <em> is the
   proof. Each half balances its own lines so no word is orphaned. */
.hero-title {
	font-size: clamp(2.7rem, 6.4vw, 5.4rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: 0;
	max-width: 30ch;
	margin-inline: auto;
	margin-bottom: 1.4rem;
	text-wrap: balance;
}

.hero-title__line,
.hero-title em {
	display: block;
}

.hero-title em {
	font-style: normal;
	color: var(--color-accent-yellow-text);
}

.hero-lead {
	font-size: clamp(1rem, 2vw, 1.2rem);
	color: var(--color-text-muted);
	max-width: 80ch;
	line-height: 1.75;
	margin-bottom: 2.5rem;
}

.hero-lead strong {
	position: relative;
	font-weight: inherit;
	color: var(--color-text);
	text-decoration: underline;
	text-decoration-color: var(--color-accent-dim);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
	transition: text-shadow 0.25s ease, text-decoration-color 0.25s ease;
}

.hero-lead strong:hover {
	text-shadow: 0 0 20px rgba(51, 75, 144, 0.6), 0 0 40px rgba(51, 75, 144, 0.25);
	text-decoration-color: var(--color-link);
}

/* Word reveal: JS wraps each H1 word in .word; hidden only until split. */
.word {
	display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
	.js .hero-title:not(.is-split) {
		opacity: 0;
		animation: made-failsafe 0.01s 2s forwards;
	}

	.js .hero-title .word {
		opacity: 0;
		transform: translateY(24px);
		animation: wordReveal 0.6s var(--ease) forwards;
		animation-delay: calc(0.25s + var(--i, 0) * 0.07s);
	}

	.js .hero-badge { animation: heroEnter 0.65s var(--ease) 0.1s both; }
	.js .hero-lead { animation: heroEnter 0.65s var(--ease) 0.75s both; }

	/* hero.js sets this for one frame when the visitor returns to the top,
	   so the entrance starts over. */
	.js .hero.is-replaying .hero-title .word,
	.js .hero.is-replaying .hero-badge,
	.js .hero.is-replaying .hero-lead {
		animation: none;
	}
}

@keyframes wordReveal {
	to { opacity: 1; transform: translateY(0); }
}

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

@keyframes made-failsafe {
	to { opacity: 1; transform: none; }
}

/* Earth dividers --------------------------------------------------------- */

.terrain-break,
.earth-divider {
	position: relative;
	z-index: 2;
	line-height: 0;
	pointer-events: none;
}

.terrain-break {
	margin-top: -10vw;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%, #000 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 55%, #000 100%);
}

.terrain-break svg,
.earth-divider svg {
	display: block;
	width: 100%;
	height: clamp(50px, 6vw, 80px);
}

.terrain-break svg {
	transform: scaleY(-1);
}

/* Under the home hero: the camera drops from the aerial toward the cut, a
   steep view into the shored duct bank with the excavator's arm at the
   digging face. The hero fades into it and it fades into the page. */
.trench-break {
	position: relative;
	z-index: 2;
	margin-top: -8vw;
	line-height: 0;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 42%, #000 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 42%, #000 100%);
}

.trench-break img {
	display: block;
	width: 100%;
	height: clamp(170px, 26vw, 420px);
	object-fit: cover;
	object-position: center 55%;
}

.trench-break::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 34%;
	background: linear-gradient(to bottom, rgba(12, 12, 14, 0), var(--color-bg) 92%);
}

.earth-divider.reverse svg {
	transform: scaleY(-1);
}

.earth-1 { fill: var(--color-earth-dark); }
.earth-2 { fill: var(--color-earth); }
.earth-3 { fill: var(--color-earth-mid); }

/* Stacked project map ---------------------------------------------------- */

/* [made_project_map layout="stack"]: the map full width with its count and
   link centred under it. */
.map-strip.map-strip--stack {
	grid-template-columns: 1fr;
	gap: 1.5rem;
	max-width: var(--max-w);
	margin-inline: auto;
	text-align: center;
}

.map-strip--stack .map-strip__text {
	order: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 2rem;
}

.map-strip--stack .map-strip__count,
.map-strip--stack .map-strip__link {
	margin-top: 0;
}

.map-strip--stack .map-strip__map {
	--map-line: 1.3;
}

/* Timeline --------------------------------------------------------------- */

.timeline-section {
	position: relative;
	z-index: 4;
	isolation: isolate;
	overflow: hidden;
	padding: 6rem 0 8rem;
}

.timeline-bg-layer {
	position: absolute;
	inset: -25% 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.84) 0%, rgba(8, 12, 20, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%),
		url("../img/bg-timeline.jpg") center / cover no-repeat;
	will-change: transform;
}

.timeline-section::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	z-index: -1;
	height: 10rem;
	background: linear-gradient(180deg, rgba(5, 4, 3, 0) 0%, #050403 100%);
	pointer-events: none;
}

.us-map-bg {
	--map-line: 1.2;
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.us-map-bg .us-map__svg {
	width: min(92%, 1100px);
	opacity: 0.32;
}

.timeline-section .section-header,
.timeline {
	position: relative;
	z-index: 2;
}

.timeline {
	max-width: 1100px;
	margin-inline: auto;
}

.timeline-svg {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	overflow: visible;
}

.timeline-path {
	fill: none;
	stroke: var(--color-link);
	stroke-width: 3;
	stroke-linecap: round;
	filter: drop-shadow(0 0 6px var(--color-accent-glow));
}

.timeline-path-bg {
	fill: none;
	stroke: var(--color-border-strong);
	stroke-width: 3;
	stroke-linecap: round;
}

.timeline-wrap {
	position: relative;
	list-style: none;
	padding: 0;
	margin: 0;
}

.timeline-item {
	position: relative;
	display: flex;
	align-items: flex-start;
}

.timeline-item + .timeline-item {
	margin-top: clamp(-5rem, -8vw, -2.5rem);
}

.timeline-item .card-side {
	width: calc(50% - 36px);
	flex-shrink: 0;
}

.timeline-item .pin-col {
	width: 72px;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	padding-top: 1.4rem;
	position: relative;
	z-index: 2;
}

.timeline-pin {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--color-accent);
	border: 3px solid rgba(0, 0, 0, 0.8);
	box-shadow: 0 0 0 3px var(--color-accent-dim), 0 0 20px var(--color-accent-glow);
	transition: transform var(--transition);
}

.timeline-item.is-visible .timeline-pin {
	transform: scale(1.15);
}

.timeline-item .card-side:first-child .timeline-card {
	margin-left: auto;
	margin-right: clamp(0px, 2vw, 12px);
	text-align: right;
}

.timeline-item .card-side:last-child .timeline-card {
	margin-right: auto;
	margin-left: clamp(0px, 2vw, 12px);
}

.timeline-card {
	position: relative;
	max-width: 440px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.35rem 1.5rem;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
	transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.timeline-card:hover,
.timeline-card:focus-within {
	transform: translateY(-3px);
	border-color: var(--color-accent-dim);
	box-shadow: 0 0 0 2px var(--color-accent-dim), 0 0 28px rgba(51, 75, 144, 0.25);
}

.timeline-card__eyebrow {
	font-size: 0.84rem;
	letter-spacing: 0.08em;
	color: var(--color-eyebrow);
	margin-bottom: 0.4rem;
}

.timeline-card__title {
	font-size: 1.4rem;
	margin-bottom: 0.6rem;
}

.timeline-card__title a {
	color: var(--color-text);
	text-decoration: none;
}

/* Whole card is the click target; the heading link stays the one tab stop. */
.timeline-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.timeline-card__title a:focus-visible {
	outline: none;
}

.timeline-card:has(a:focus-visible) {
	outline: var(--focus-ring);
	outline-offset: 3px;
}

.timeline-card p:not(.timeline-card__eyebrow) {
	color: var(--color-text-muted);
	font-size: 0.95rem;
	line-height: 1.7;
}

.timeline-card--final {
	border-color: var(--color-accent-yellow-dim);
}

.timeline-card--final .timeline-card__title a {
	color: var(--color-eyebrow);
}

/* Services overview ------------------------------------------------------ */

.services-overview {
	padding: 6rem 0;
	background: var(--color-bg);
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
}

/* Core's flow layout puts the block gap (24px) above every sibling in a
   group. In a grid that pushes the second and later cells down, so cards
   and columns start 24px lower than the first: the grid gap is the spacing. */
.services-grid > *,
.feature-grid > *,
.tn-cards > *,
.home-contact__grid > *,
.bio-section > *,
.contact-grid > * {
	margin-block-start: 0;
}

.service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform var(--transition), border-color var(--transition);
}

.service-card:hover,
.service-card:focus-within {
	transform: translateY(-4px);
	border-color: var(--color-accent-dim);
}

.service-card .wp-block-image {
	overflow: hidden;
}

.service-card .wp-block-image img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	object-position: center 40%;
	border-radius: 0;
	transition: transform 0.55s var(--ease);
}

.service-card:hover .wp-block-image img {
	transform: scale(1.07);
}

.service-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 1.6rem;
}

.service-card-body h3 {
	font-size: 1.5rem;
	margin-bottom: 0.6rem;
}

.service-card-body p {
	color: var(--color-text-muted);
	font-size: 0.92rem;
	line-height: 1.7;
	margin-bottom: 1rem;
}

.service-card-body ul,
.check-list {
	list-style: none;
	padding: 0;
	margin-bottom: 1.2rem;
}

.service-card-body li,
.check-list li {
	position: relative;
	padding-left: 1.2rem;
	color: var(--color-text-muted);
	font-size: 0.9rem;
	line-height: 1.75;
}

.service-card-body li + li,
.check-list li + li {
	margin-top: 0.3rem;
}

.service-card-body li::before,
.check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-accent-yellow);
}

.service-card-body .service-link {
	margin-top: auto;
	margin-bottom: 0;
}

.service-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
}

.service-link a::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--icon-arrow) center / contain no-repeat;
	mask: var(--icon-arrow) center / contain no-repeat;
	transition: transform var(--transition);
}

.service-link a:hover::after {
	transform: translateX(3px);
}

/* Tennessee band ---------------------------------------------------------- */

.tn-band {
	position: relative;
	padding: 6rem 0;
	background:
		radial-gradient(ellipse at 15% 20%, rgba(212, 230, 0, 0.06) 0%, transparent 50%),
		linear-gradient(180deg, var(--color-earth-dark) 0%, #120d09 100%);
	border-block: 1px solid var(--color-border);
}

.tn-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
	margin-bottom: 2.5rem;
}

.tn-card {
	position: relative;
	padding: 2rem;
	background: rgba(18, 24, 32, 0.85);
	border: 1px solid var(--color-border);
	border-top: 3px solid var(--color-earth-light);
	border-radius: var(--radius);
	transition: transform var(--transition), border-color var(--transition);
}

.tn-card:hover,
.tn-card:focus-within {
	transform: translateY(-4px);
	border-color: var(--color-accent-yellow-dim);
	border-top-color: var(--color-accent-yellow);
}

.tn-card h3 {
	font-size: 1.65rem;
	margin-bottom: 0.6rem;
}

.tn-card h3 a {
	color: var(--color-text);
	text-decoration: none;
}

.tn-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.tn-card:has(a:focus-visible) {
	outline: var(--focus-ring);
	outline-offset: 3px;
}

.tn-card h3 a:focus-visible {
	outline: none;
}

.tn-card p {
	color: var(--color-text-muted);
	margin-bottom: 1rem;
}

.tn-call {
	text-align: center;
	font-size: 1.1rem;
	color: var(--color-text-muted);
}

.tn-call a {
	font-weight: 700;
	color: var(--color-eyebrow);
	white-space: nowrap;
}

/* About (homepage) ------------------------------------------------------- */
/* The story that used to be the About page, first thing under the hero:
   section header, Marty's bio and "The M.A.D.E Standard", inside
   .home-ground. The services follow, then the field photo strip
   (.home-field) and the contact form. */

.home-about {
	position: relative;
	padding: 5.5rem 0 2rem;
	scroll-margin-top: 5rem;
}

.home-about .section-header {
	margin-bottom: 3.5rem;
}

.home-about .bio-photo img {
	object-position: center 20%;
}

/* Where We Work: the six-photo field strip between the services and the
   contact form. The services' bottom padding is the gap above it. */
.home-field {
	padding: 0 0 1rem;
}

.home-field .photo-strip {
	margin-top: 0;
}

/* Ground: the jobsite from above, from the timeline to the contact form. One
   tall render, leaning toward the excavator, follows the trench line from the
   digging face past the shores, the open duct bank and the handhole to the
   backfill; the footer shows the rest of the same render. ground.js pins it
   to the viewport and moves it more slowly than the page, so scrolling
   travels along the trench and ends with the strip's bottom edge on the
   footer's top; it may also relight it. Without JS the render sits at the
   bottom of the wrapper at full width, so the seam still lines up. Overflow
   is clipped because the sticky layers' negative margins overrun the box. */

.home-ground {
	position: relative;
	isolation: isolate;
	overflow: clip;
	background: #0d0a07 url("../img/trench/worksite-strip.webp") center bottom / 100% auto no-repeat;
}

.home-ground.has-strip {
	background-image: none;
}

.home-ground::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, var(--color-bg) 0, rgba(12, 12, 14, 0) 10rem),
		linear-gradient(0deg, rgba(6, 6, 7, 0.43) 0, rgba(6, 6, 7, 0) 14rem),
		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.42);
	pointer-events: none;
}

.strip-layer {
	position: sticky;
	top: 0;
	z-index: -3;
	height: 100vh;
	margin-bottom: -100vh;
	overflow: hidden;
	pointer-events: none;
}

.strip-layer__img {
	position: absolute;
	top: 0;
	left: 50%;
	background: center top / 100% 100% no-repeat;
	will-change: transform;
}

/* Phones get the same trench line framed narrower, also bottom-aligned
   without JS so it meets the footer. */
@media (max-width: 899px) {
	.home-ground {
		background: #0d0a07 url("../img/trench/worksite-strip-mobile.webp") center bottom / 100% auto no-repeat;
	}
}

.home-ground .timeline-section {
	overflow: visible;
}

.home-ground .timeline-bg-layer,
.home-ground .timeline-section::after {
	display: none;
}

.home-ground .us-map-bg .us-map__svg {
	opacity: 0.22;
}

.home-ground .services-overview {
	background: none;
}

.home-ground .tn-band {
	background: none;
	border-block: 0;
}

/* Stats ------------------------------------------------------------------ */

.stats {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.75rem;
}

.stats--pills .stat-item {
	min-width: 120px;
	padding: 0.85rem 1.25rem;
	text-align: center;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	transition: border-color var(--transition);
}

.stats--pills .stat-item:hover {
	border-color: var(--color-accent-dim);
}

.stat-value {
	display: block;
	line-height: 1;
	color: var(--color-accent-yellow-text);
}

.stat-num {
	font-family: var(--font-display);
	font-size: 2.2rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.stat-suffix {
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 600;
}

.stat-label {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
}

.stats--row {
	gap: 2.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--color-border);
}

.stats--row .stat-num {
	font-size: 2.2rem;
}

/* Inner page hero -------------------------------------------------------- */

/* A straight-edged photo (or textured) hero that fades to the page colour
   along its bottom edge. The home hero keeps its own trench divider; inner
   pages have no band or terrain line under the hero. */
.page-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 10rem 0 5rem;
	text-align: center;
	border-bottom: 1px solid var(--color-border);
}

.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(180deg, rgba(12, 12, 14, 0) 70%, var(--color-bg) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.93) 0%, rgba(0, 0, 0, 0.88) 100%),
		radial-gradient(ellipse at 50% 80%, rgba(51, 75, 144, 0.14) 0%, transparent 55%),
		url("../img/bg-page.jpg") center 30% / cover no-repeat;
}

.page-hero.has-bucket::after {
	content: "";
	position: absolute;
	right: 3%;
	bottom: 10%;
	z-index: -1;
	width: clamp(160px, 22vw, 300px);
	aspect-ratio: 460 / 346;
	background: var(--color-accent);
	opacity: 0.22;
	-webkit-mask: url("../img/bucket.svg") center / contain no-repeat;
	mask: url("../img/bucket.svg") center / contain no-repeat;
}

.page-hero .section-subtitle {
	margin-inline: auto;
}

.page-hero .wp-block-buttons {
	justify-content: center;
	margin-top: 2rem;
}

/* Photo heroes (inc/heroes.php sets --hero-image and --hero-pos per page).
   The page's own photo replaces the shared backdrop. */
.page-hero.has-image::before {
	background:
		linear-gradient(180deg, rgba(12, 12, 14, 0) 70%, var(--color-bg) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.7) 45%, rgba(0, 0, 0, 0.88) 100%),
		var(--hero-image) var(--hero-pos, center) / cover no-repeat;
}

.page-hero.has-image.has-bucket::after {
	display: none;
}

.page-hero.has-image .section-title,
.page-hero.has-image .section-subtitle {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 24px rgba(0, 0, 0, 0.5);
}

.page-hero.has-image .section-subtitle {
	color: #e4e4e7;
}

/* Left-aligned hero over the trench render (Federal). */
.page-hero--left {
	display: flex;
	align-items: flex-end;
	min-height: clamp(560px, 72vh, 780px);
	padding-top: 11rem;
	text-align: left;
}

.page-hero--left .container {
	width: 100%;
}

/* Title and lead run the full content width (the title breaks once at
   most on a desktop screen). */
.page-hero--left .section-title {
	max-width: none;
	font-size: clamp(2.6rem, 5.4vw, 4.4rem);
}

/* The lead reads as the opening of the page, not a second title: larger,
   close under the title, and the content starts soon after the hero. */
.page-hero--left .section-subtitle {
	max-width: none;
	margin-inline: 0;
	font-size: 1.25rem;
	line-height: 1.6;
	color: #d4d4d8;
}

.page-hero--left .section-label {
	margin-bottom: 0.5rem;
}

.page-hero--left .section-title {
	margin-bottom: 0.75rem;
}

.page-hero--left .wp-block-buttons {
	justify-content: flex-start;
}

.page-hero--left + .page-content {
	padding-top: 3.5rem;
}

.page-hero.page-hero--left::before {
	background:
		linear-gradient(180deg, rgba(12, 12, 14, 0) 70%, var(--color-bg) 100%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.66) 50%, rgba(0, 0, 0, 0.3) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.35) 100%),
		var(--hero-image) var(--hero-pos, center) / cover no-repeat;
}

/* Split hero with the estimate form beside the copy (Commercial). */
.page-hero--split {
	padding-top: 9rem;
	text-align: left;
}

.hero-split {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.hero-split .section-subtitle {
	margin-inline: 0;
}

.hero-split__points {
	list-style: none;
	display: grid;
	gap: 0.65rem;
	margin: 1.75rem 0 0;
	padding: 0;
}

.hero-split__points li {
	position: relative;
	padding-left: 1.85rem;
	color: #e4e4e7;
	line-height: 1.55;
}

.hero-split__points li::before {
	content: "";
	position: absolute;
	top: 0.3em;
	left: 0;
	width: 1.1rem;
	height: 1.1rem;
	background: var(--color-accent-yellow);
	-webkit-mask: var(--icon-check) center / contain no-repeat;
	mask: var(--icon-check) center / contain no-repeat;
}

.hero-split .wp-block-buttons {
	justify-content: flex-start;
	margin-top: 1.75rem;
}

/* "What to Expect" panel beside the Commercial hero copy; the estimate
   form sits at the end of the page (#estimate). */
.hero-split__panel {
	padding: 2rem 2.25rem 2.25rem;
	background: rgba(8, 10, 14, 0.9);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.hero-split__panel h2 {
	font-size: 1.6rem;
	margin-bottom: 1rem;
}

.hero-split__panel .hero-split__points {
	margin-top: 0;
	gap: 0.8rem;
}

.form-panel__lead {
	color: var(--color-text-muted);
	font-size: 0.95rem;
	line-height: 1.6;
	margin-bottom: 1.25rem;
}

/* Warm-toned photo hero (Residential). */
.page-hero.page-hero--warm::before {
	background:
		linear-gradient(180deg, rgba(12, 12, 14, 0) 70%, var(--color-bg) 100%),
		radial-gradient(ellipse at 50% 35%, rgba(214, 140, 64, 0.22) 0%, rgba(214, 140, 64, 0) 60%),
		linear-gradient(180deg, rgba(26, 14, 6, 0.78) 0%, rgba(18, 10, 5, 0.58) 45%, rgba(0, 0, 0, 0.86) 100%),
		var(--hero-image) var(--hero-pos, center) / cover no-repeat;
}

.page-hero--warm .section-label {
	color: #f0c27b;
}

/* Page content ----------------------------------------------------------- */

.page-content {
	padding: 5rem 0;
}

.content-block {
	max-width: var(--prose-w);
	margin-inline: auto;
}

.content-block + .content-block,
.feature-grid + .content-block,
.content-block + .feature-grid,
.media-split + .content-block,
.content-block + .media-split,
.feature-grid + .media-split,
.media-split + .feature-grid {
	margin-top: 4rem;
}

.content-block h2 {
	font-size: clamp(1.4rem, 3vw, 1.75rem);
	margin-bottom: 1rem;
}

.content-block h3 {
	font-size: 1.5rem;
	margin: 1.75rem 0 0.75rem;
}

.content-block p,
.content-block li {
	color: var(--color-text-muted);
	line-height: 1.8;
}

.content-block p + p,
.content-block p + ul,
.content-block ul + p {
	margin-top: 1rem;
}

.content-block ul {
	list-style: none;
	padding: 0;
}

.content-block li {
	position: relative;
	padding-left: 1.4rem;
}

.content-block li + li {
	margin-top: 0.45rem;
}

.content-block li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.75em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-accent-yellow);
}

.content-block strong {
	color: var(--color-text);
}

.section-divider {
	margin-top: 5rem;
	padding-top: 5rem;
	border-top: 1px solid var(--color-border);
}

/* Feature cards ---------------------------------------------------------- */

.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
	max-width: var(--max-w);
	margin-inline: auto;
}

.feature-card {
	position: relative;
	padding: 2rem 1.75rem 1.75rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: transform var(--transition), border-color var(--transition);
}

.feature-card:hover {
	transform: translateY(-3px);
	border-color: var(--color-accent-dim);
}

.feature-card::before {
	content: "";
	display: block;
	width: 48px;
	height: 48px;
	margin-bottom: 1.25rem;
	border-radius: 12px;
	background: var(--color-accent-dim);
}

.feature-card::after {
	content: "";
	position: absolute;
	top: calc(2rem + 13px);
	left: calc(1.75rem + 13px);
	width: 22px;
	height: 22px;
	background: var(--color-link);
	-webkit-mask: var(--icon, var(--icon-check)) center / contain no-repeat;
	mask: var(--icon, var(--icon-check)) center / contain no-repeat;
}

.feature-card h3 {
	font-size: 1.4rem;
	margin-bottom: 0.5rem;
}

.feature-card p {
	color: var(--color-text-muted);
	font-size: 0.92rem;
	line-height: 1.7;
}

/* Media split ------------------------------------------------------------ */

.media-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
	max-width: var(--max-w);
	margin-inline: auto;
}

.media-split .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid var(--color-border);
}

.media-split .content-block {
	margin: 0;
}

.media-split.is-reversed > .wp-block-image {
	order: 2;
}

/* Bio -------------------------------------------------------------------- */

.bio-section {
	display: grid;
	grid-template-columns: 0.7fr 1.3fr;
	gap: 3.5rem;
	align-items: start;
	max-width: var(--max-w);
	margin-inline: auto;
}

.bio-photo img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border: 1px solid var(--color-border);
}

.bio-text h2 {
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	margin-bottom: 0.25rem;
}

.bio-role {
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-eyebrow);
	margin-bottom: 1.5rem;
}

.bio-text p:not(.bio-role) {
	color: var(--color-text-muted);
	line-height: 1.8;
}

.bio-text p + p {
	margin-top: 1rem;
}

/* CTA band --------------------------------------------------------------- */

.cta-band {
	position: relative;
	isolation: isolate;
	padding: 8rem 0 6rem;
	text-align: center;
	clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%);
	margin-top: -2rem;
}

.cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.88) 0%, rgba(10, 10, 10, 0.86) 100%),
		url("../img/bg-cta.jpg") center / cover no-repeat;
}

.cta-band .section-title {
	margin-bottom: 1rem;
}

.cta-band p {
	color: var(--color-text-muted);
	max-width: 70ch;
	margin: 0 auto 2.5rem;
	font-size: 1.05rem;
}

.cta-band .wp-block-buttons {
	justify-content: center;
}

/* Contact ---------------------------------------------------------------- */

.contact-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 3.5rem;
	max-width: 1200px;
	margin-inline: auto;
	align-items: start;
}

.contact-info h2,
.form-panel h2 {
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

.contact-info > p {
	color: var(--color-text-muted);
	line-height: 1.75;
	margin-bottom: 1.75rem;
}

.contact-info .contact-detail {
	font-size: 1.02rem;
}

.form-panel {
	padding: 2.25rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.form-band {
	max-width: 1000px;
	margin: 5rem auto 0;
}

.form-band .section-header {
	margin-bottom: 2rem;
}

/* Landing layouts ------------------------------------------------------- */

/* Grid children inside block groups: cancel the editor's flow gap. */
.hero-split > *,
.service-band > *,
.map-strip > *,
.process-steps > *,
.trust-row__list > *,
.tile-grid > *,
.compare__panels > *,
.stats--ribbon > * {
	margin-block-start: 0;
}

/* Federal: stat ribbon under the hero, then alternating image + text bands,
   then the past-performance map. */
.stat-ribbon {
	position: relative;
	z-index: 2;
	margin-top: -2.25rem;
}

.stats--ribbon {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin: 0;
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.stats--ribbon .stat-item {
	padding: 1.6rem 2rem;
	text-align: center;
	border-left: 1px solid var(--color-border);
}

.stats--ribbon .stat-item:first-child {
	border-left: 0;
}

.stats--ribbon .stat-num {
	font-size: 2.4rem;
}

.page-content--bands {
	padding: 4.5rem 0 5rem;
}

.service-band {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	max-width: var(--max-w);
	margin-inline: auto;
}

.service-band + .service-band {
	margin-top: 5.5rem;
	padding-top: 5.5rem;
	border-top: 1px solid var(--color-border);
}

.service-band.is-reversed > .wp-block-image {
	order: 2;
}

.service-band__media {
	margin: 0;
}

.service-band__media img {
	width: 100%;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.service-band__body h2 {
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	margin: 0.6rem 0 1rem;
}

.service-band__body > p:not(.section-label) {
	color: var(--color-text-muted);
	line-height: 1.7;
}

.scope-list {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.1rem 1.5rem;
	margin: 1.75rem 0 0;
	padding: 0;
}

.scope-list li {
	position: relative;
	padding-left: 1.9rem;
	color: var(--color-text-muted);
	font-size: 0.94rem;
	line-height: 1.55;
}

.scope-list li::before {
	content: "";
	position: absolute;
	top: 0.25em;
	left: 0;
	width: 1.1rem;
	height: 1.1rem;
	background: var(--color-accent-yellow);
	-webkit-mask: var(--icon-check) center / contain no-repeat;
	mask: var(--icon-check) center / contain no-repeat;
}

.scope-list strong {
	display: block;
	color: var(--color-text);
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.service-band__note {
	margin-top: 1.75rem;
	padding: 1rem 1.25rem;
	background: var(--color-surface);
	border-left: 3px solid var(--color-accent);
	color: var(--color-text-muted);
	font-size: 0.9rem;
	line-height: 1.65;
}

.map-band {
	padding: 5rem 0;
	background: var(--color-bg-alt);
	border-top: 1px solid var(--color-border);
}

.map-strip {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.map-strip__title {
	font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.map-strip__intro {
	margin-top: 0.75rem;
	color: var(--color-text-muted);
	line-height: 1.7;
}

.map-strip__count {
	margin-top: 1.25rem;
	color: var(--color-eyebrow);
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.map-strip__link {
	margin-top: 1.5rem;
}

.map-strip__map {
	--map-line: 1.6;
	width: 100%;
}

.map-band .traxx-related {
	margin-top: 4.5rem;
	padding-top: 4rem;
	border-top: 1px solid var(--color-border);
}

/* Commercial: numbered process steps, then the trust row. */
.page-content--process {
	padding-top: 5rem;
}

.process-steps {
	counter-reset: step;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem 0;
	max-width: var(--max-w);
	margin-inline: auto;
}

.process-step {
	counter-increment: step;
	position: relative;
	padding: 2.25rem 1.5rem 1.5rem 0;
	border-top: 1px solid var(--color-border-strong);
}

.process-step + .process-step {
	padding-left: 1.5rem;
	border-left: 1px solid var(--color-border);
}

.process-step:nth-child(3n+1) {
	padding-left: 0;
	border-left: 0;
}

.process-step::before {
	content: "0" counter(step);
	display: block;
	margin-bottom: 1rem;
	color: var(--color-eyebrow);
	font-family: var(--font-display);
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
}

.process-step::after {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 3rem;
	height: 3px;
	background: var(--color-eyebrow);
}

.process-step + .process-step::after {
	left: 1.5rem;
}

.process-step:nth-child(3n+1)::after {
	left: 0;
}

.process-step h3 {
	font-size: 1.3rem;
	margin-bottom: 0.6rem;
}

.process-step p {
	color: var(--color-text-muted);
	font-size: 0.92rem;
	line-height: 1.7;
}

.process-step .process-step__expect {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px dashed var(--color-border-strong);
	font-size: 0.88rem;
}

.process-steps + .media-split,
.compare + .media-split {
	margin-top: 5rem;
}

/* Photo strip: a row of 3:2 job-site photos under a text-led section. */
.photo-strip {
	max-width: var(--max-w);
	margin: 5rem auto 0;
}

.service-band + .photo-strip {
	margin-top: 5.5rem;
	padding-top: 5.5rem;
	border-top: 1px solid var(--color-border);
}

.photo-strip .section-header {
	margin-bottom: 2rem;
}

.photo-strip__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.photo-strip__grid .wp-block-image {
	margin: 0;
}

.photo-strip__grid img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.photo-strip + .compare,
.photo-strip + .media-split {
	margin-top: 5rem;
}

.trust-row {
	padding: 0 0 5rem;
}

.trust-row__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	max-width: var(--max-w);
	margin-inline: auto;
	background: var(--color-border);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
}

.trust-item {
	padding: 1.4rem 1.6rem;
	background: var(--color-surface);
}

.trust-item__label {
	margin: 0 0 0.35rem;
	color: var(--color-text-muted);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.trust-item__value {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.trust-row .traxx-related {
	margin-top: 4.5rem;
}

/* Residential: large icon tiles with "what to expect" copy, then the
   clearing-to-grade comparison, then the estimate form. */
.tile-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	max-width: var(--max-w);
	margin-inline: auto;
}

.tile {
	position: relative;
	display: grid;
	grid-template-columns: 72px 1fr;
	grid-template-rows: auto 1fr;
	column-gap: 1.5rem;
	padding: 2rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.tile::before {
	content: "";
	grid-row: 1 / span 2;
	width: 72px;
	height: 72px;
	border-radius: 16px;
	background: var(--color-accent-yellow-dim);
}

.tile::after {
	content: "";
	position: absolute;
	top: calc(2rem + 20px);
	left: calc(2rem + 20px);
	width: 32px;
	height: 32px;
	background: var(--color-accent-yellow);
	-webkit-mask: var(--icon, var(--icon-check)) center / contain no-repeat;
	mask: var(--icon, var(--icon-check)) center / contain no-repeat;
}

.tile h3 {
	font-size: 1.45rem;
	margin-bottom: 0.5rem;
}

.tile > p {
	grid-column: 2;
	margin-block-start: 0;
	color: var(--color-text-muted);
	line-height: 1.65;
}

.tile__expect {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px dashed var(--color-border-strong);
	font-size: 0.9rem;
}

.compare {
	margin-top: 5.5rem;
}

.compare__panels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	max-width: var(--max-w);
	margin-inline: auto;
}

.compare__panel {
	position: relative;
}

.compare__image {
	position: relative;
	margin: 0;
}

.compare__image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.compare__panel:last-child .compare__image::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--color-accent-yellow);
	border-radius: var(--radius);
	pointer-events: none;
}

.compare__caption {
	margin-top: 1rem;
	color: var(--color-text-muted);
	font-size: 0.95rem;
	line-height: 1.6;
}

.compare__caption strong {
	display: table;
	margin-bottom: 0.4rem;
	padding: 0.3rem 0.7rem;
	background: var(--color-surface-hi);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.compare__panel:last-child .compare__caption strong {
	background: var(--color-accent-yellow);
	border-color: var(--color-accent-yellow);
	color: #000;
}

.compare__note {
	margin-top: 2rem;
	text-align: center;
	color: var(--color-text-muted);
}

@media (max-width: 1023px) {
	.process-steps {
		grid-template-columns: 1fr 1fr;
		row-gap: 1rem;
	}

	.process-step:nth-child(3n+1) {
		padding-left: 1.5rem;
		border-left: 1px solid var(--color-border);
	}

	.process-step:nth-child(3n+1)::after {
		left: 1.5rem;
	}

	.process-step:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	.process-step:nth-child(odd)::after {
		left: 0;
	}

	.trust-row__list {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 900px) {
	.hero-split,
	.service-band,
	.map-strip,
	.tile-grid,
	.compare__panels {
		grid-template-columns: 1fr;
	}

	.hero-split {
		gap: 2.5rem;
	}

	.service-band.is-reversed > .wp-block-image {
		order: 0;
	}

	.service-band + .service-band,
	.service-band + .photo-strip {
		margin-top: 4rem;
		padding-top: 4rem;
	}

	.photo-strip {
		margin-top: 3.5rem;
	}

	.service-band__media img {
		aspect-ratio: 16 / 10;
	}

	.map-strip__map {
		order: -1;
	}
}

@media (max-width: 768px) {
	.stat-ribbon {
		margin-top: 0;
		padding-top: 1.5rem;
	}

	.stats--ribbon {
		grid-template-columns: 1fr;
		box-shadow: none;
	}

	.stats--ribbon .stat-item {
		padding: 1.1rem 1.25rem;
		border-left: 0;
	}

	.stats--ribbon .stat-item + .stat-item {
		border-top: 1px solid var(--color-border);
	}

	.page-hero--left {
		min-height: 0;
		padding-top: 10rem;
	}

	.page-hero--left .section-title {
		max-width: none;
		font-size: clamp(2.2rem, 9vw, 3rem);
	}

	.scope-list {
		grid-template-columns: 1fr;
	}

	.tile {
		grid-template-columns: 1fr;
		padding: 1.5rem;
	}

	.tile::before {
		grid-row: auto;
		width: 56px;
		height: 56px;
		margin-bottom: 1rem;
		border-radius: 12px;
	}

	.tile::after {
		top: calc(1.5rem + 15px);
		left: calc(1.5rem + 15px);
		width: 26px;
		height: 26px;
	}

	.tile > p {
		grid-column: 1;
	}
}

@media (max-width: 599.98px) {
	.process-steps,
	.trust-row__list,
	.photo-strip__grid {
		grid-template-columns: 1fr;
	}

	.process-step + .process-step {
		padding-left: 0;
		border-left: 0;
	}

	.process-step + .process-step::after {
		left: 0;
	}

	.process-step {
		padding-right: 0;
	}
}

/* Home: closing contact section */

.home-contact {
	position: relative;
	padding: 7rem 0;
}

.home-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.home-contact__intro .section-title,
.home-contact__intro .section-subtitle {
	text-align: left;
	margin-inline: 0;
}

.home-contact__intro .section-subtitle {
	margin-bottom: 2rem;
}

@media (max-width: 900px) {
	.home-contact {
		padding: 5rem 0;
	}

	.home-contact__grid {
		grid-template-columns: 1fr;
	}
}

/* Reveal on scroll -------------------------------------------------------- */

:is(.section-header, .service-card, .tn-card, .feature-card, .content-block, .bio-section, .contact-grid, .media-split, .timeline-item, .project-card, .form-panel) {
	transition: opacity 0.7s ease, transform 0.7s ease;
}

/* .reveal-ready is set by reveal.js after it marks on-screen items visible,
   so nothing is ever hidden if the script doesn't run. */
@media (prefers-reduced-motion: no-preference) {
	.reveal-ready :is(.section-header, .service-card, .tn-card, .feature-card, .content-block, .bio-section, .contact-grid, .media-split, .timeline-item, .project-card, .form-panel):not(.is-visible) {
		opacity: 0;
		transform: translateY(24px);
	}

	.services-grid > :nth-child(2),
	.feature-grid > :nth-child(2),
	.tn-cards > :nth-child(2) { transition-delay: 0.12s; }

	.services-grid > :nth-child(3),
	.feature-grid > :nth-child(3) { transition-delay: 0.24s; }

	.feature-grid > :nth-child(4) { transition-delay: 0.36s; }
}

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

/* Responsive ------------------------------------------------------------- */

@media (max-width: 900px) {
	.bio-section,
	.contact-grid,
	.media-split {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.media-split.is-reversed > .wp-block-image {
		order: 0;
	}

	.home-about {
		padding-top: 5rem;
	}

	.home-about .bio-photo img {
		aspect-ratio: 4 / 3;
		max-height: 360px;
	}
}

@media (max-width: 768px) {
	.hero {
		padding-top: 7.5rem;
	}

	/* Shorter fade on phones: the photo stays behind the copy and runs out
	   into the page colour just above the About section. */
	.hero::before {
		-webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
	}

	.terrain-break,
	.trench-break {
		margin-top: -2.5rem;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
		mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
	}

	.trench-break img {
		height: clamp(190px, 48vw, 300px);
		object-position: center 45%;
	}

	.page-hero,
	.cta-band {
		clip-path: none;
		margin-top: 0;
	}

	.page-hero {
		padding: 9rem 0 3.5rem;
	}

	.page-hero.has-bucket::after {
		display: none;
	}

	.cta-band {
		padding: 5rem 0;
	}

	.services-grid {
		grid-template-columns: 1fr;
	}

	.service-card .wp-block-image img {
		height: 190px;
	}

	.timeline-item + .timeline-item {
		margin-top: 1.25rem;
	}

	.timeline-item {
		flex-direction: row;
	}

	.timeline-item .pin-col {
		order: -1;
		width: 48px;
		justify-content: flex-start;
		padding: 1.4rem 0 0 15px;
	}

	.timeline-item .card-side {
		width: auto;
		flex: 1;
	}

	.timeline-item .card-side:empty {
		display: none;
	}

	.timeline-item .card-side:first-child .timeline-card,
	.timeline-item .card-side:last-child .timeline-card {
		margin: 0;
		text-align: left;
		max-width: none;
	}

	.us-map-bg {
		display: none;
	}

	.stats--row {
		gap: 1.5rem;
	}

	.form-panel {
		padding: 1.5rem;
	}
}

@media (max-width: 479.98px) {
	.hero-badge {
		font-size: 0.78rem;
		letter-spacing: 0.1em;
		padding: 0.4rem 0.9rem;
	}

	.hero {
		padding-top: 10rem;
	}
}

/* Icons (mask sources) --------------------------------------------------- */

:root {
	--icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
	--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.icon-shield { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }
.icon-file { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8'/%3E%3C/svg%3E"); }
.icon-clock { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
.icon-users { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.icon-server { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='8' rx='2'/%3E%3Crect x='2' y='14' width='20' height='8' rx='2'/%3E%3Cpath d='M6 6h.01M6 18h.01'/%3E%3C/svg%3E"); }
.icon-cable { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1zM4 22v-7'/%3E%3C/svg%3E"); }
.icon-activity { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E"); }
.icon-lock { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.icon-globe { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); }
.icon-layers { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E"); }
.icon-tool { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E"); }
.icon-box { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3C/svg%3E"); }
.icon-home { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E"); }
.icon-truck { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h15v13H1zM16 8h4l3 3v5h-7z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E"); }
.icon-tree { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5M7 17h10l-5-7h3l-3-6-3 6h3z'/%3E%3C/svg%3E"); }
.icon-road { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22 8 2M20 22 16 2M12 4v3M12 11v3M12 18v3'/%3E%3C/svg%3E"); }
.icon-hammer { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 12-8.5 8.5a2.12 2.12 0 0 1-3-3L12 9M17.64 15 22 10.64M20.91 11.7l-1.25-1.25a2.4 2.4 0 0 1-.7-1.71V7.86L16.5 5.4A6 6 0 0 0 12.06 3.6H9l.92.82A6.18 6.18 0 0 1 12 9.06v1.38l2 2h2.47l2.26 1.91'/%3E%3C/svg%3E"); }
.icon-drop { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'/%3E%3C/svg%3E"); }
.icon-pin { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }