:root {
	--vh: 1vh;
	--background-main: #ffffff;
	--background-secondary: #f5f5f5;
	--text-primary: #1a1a1a;
	--text-secondary: #4a4a4a;
	--thematic-break-color: rgba(0, 0, 0, 0.1);
	--accent-color: #0066cc;
	--textLarge: 40px;

	/* One layering scale, so overlaps are decided here rather than by whoever
	   last picked a number. The nav dropdown and the contact button were both
	   1000, and the mobile menu was 25 — so the floating button sat on top of
	   the open menu. */
	--z-nav: 10;
	--z-dropdown: 100;
	--z-contact-panel: 900;
	--z-contact-button: 910;
	--z-mobile-menu: 1000;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: 'Inter', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	width: 100%;
	height: 100%;
	background-color: var(--background-main);
	color: var(--text-primary);

	max-width: 100%;
	box-sizing: border-box;
	min-height: 100vh;
}

.hero-background-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('/images/mobile-welding-full.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
}

/* Bottom-weighted scrim rather than a flat 60% wash: the headline and logo stay
   legible while more of the welding photograph survives. */
.hero-background-image::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.78) 100%);
	z-index: 1;
}

/* The source logo is 412px wide with no vector available. Measured ceiling is
   ~700px at 1x and ~500px on a 2x display before the white keyline around each
   letter goes soft, so 340px leaves headroom on both. */
.hero-logo {
	display: block;
	width: 100%;
	max-width: 340px;
	height: auto;
	margin-bottom: 28px;
	filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.55));
}

.hero-cta-row {
	display: flex;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 28px;
}

/* Interior heroes are centred, unlike the homepage where the row is left-hung
   under the headline. */
.page-hero .hero-cta-row {
	justify-content: center;
	margin-top: 36px;
}

.hero-cta-primary,
.hero-cta-phone,
.hero-cta-secondary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	text-decoration: none;
	font-weight: 600;
	font-size: 17px;
	letter-spacing: 0.3px;
	border-radius: 2px;
}

.hero-cta-primary {
	background: var(--accent-color);
	color: #fff;
	transition: background-color 0.25s ease, gap 0.25s ease;
}

.hero-cta-primary:hover {
	background: #0052a3;
	gap: 14px;
}

/* The outline treatment. It is the phone on most pages, but on the rescue page
   calling is the primary action, so the two swap and the quote link takes it. */
.hero-cta-phone,
.hero-cta-secondary {
	color: #fff;
	font-weight: 500;
	padding: 14px 24px;
	border: 2px solid rgba(255, 255, 255, 0.55);
	transition: border-color 0.25s ease, background-color 0.25s ease, gap 0.25s ease;
}

.hero-cta-phone:hover,
.hero-cta-secondary:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.12);
}

.hero-cta-secondary:hover {
	gap: 14px;
}

.hero-content {
	position: relative;
	z-index: 2;
	text-align: left;
	padding: 0 5vw;
	padding-bottom: 4vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	max-width: 1400px;
	margin: 0 auto;
}

#home h1 {
	font-size: 44px;
	font-weight: 600;
	text-transform: none;
	text-align: left;
	position: relative;
	z-index: 2;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
	color: white;
	margin: 0;
	line-height: 1.2;
	max-width: 1200px;
	width: 100%;
}

h1,
h2 {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 48px;
	text-align: center;
	color: var(--text-primary);
}

h1 {
	text-transform: none;
}

h3 {
	font-size: 36px;
	font-weight: 500;
	color: var(--text-primary);
}

h4 {
	font-size: 24px;
	font-weight: 500;
	color: var(--text-primary);
}

section {
	background: var(--background-main);
	margin: 0;
	max-width: 1400px;
	margin: 0 auto;
	padding: 40px 5vw;
}

/* A little extra on top to separate the mission statement from the hero image
   directly above it, and a little less underneath: the Services heading below
   brings its own section padding, so the standard 40px here only widened a gap
   that was already too big to scroll past. */
#about {
	padding-top: 48px;
	padding-bottom: 32px;
}

/* ---- Interior page hero ----------------------------------------------- */
/* Pages without their own hero used to start abruptly under the nav, with
   .section-first padding standing in for one. This gives them the same
   entrance the service pages have. Each page sets its own background image. */

.page-hero {
	background-size: cover;
	background-position: center;
	padding: 120px 5vw 90px;
	text-align: center;
	color: #fff;
}

.page-hero h1 {
	color: #fff;
	font-size: 56px;
	margin: 0 0 16px;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.page-hero p {
	font-size: 22px;
	max-width: 760px;
	margin: 0 auto;
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* ---- Our Story --------------------------------------------------------- */

.story-section {
	padding-top: 80px;
	padding-bottom: 80px;
}

.story-content {
	max-width: 680px;
	margin: 0 auto;
}

/* Body copy was running to ~110 characters a line at full width. The 680px
   container puts it in the comfortable 60-75 range without shrinking the type.
   The measure lives on the container, not on each block — setting 66ch on both
   resolved to different widths at 24px and 18px and broke the shared left edge. */
.story-lead {
	margin: 0 0 40px;
	font-size: 24px;
	line-height: 1.6;
	color: var(--text-primary);
	font-weight: 500;
	border-left: 3px solid var(--accent-color);
	padding-left: 24px;
}

.story-text {
	text-align: left;
}

.story-text p {
	font-size: 18px;
	line-height: 1.85;
	color: var(--text-secondary);
	margin: 0 0 24px;
}

.story-text p:last-child {
	margin-bottom: 0;
}

/* Sections are white by default; add .section-alt for the grey band.
   This used to be section:nth-child(odd), which depended on a section's
   position among ALL its siblings — so adding or removing any top-level block
   silently inverted the banding on the whole page. */
.section-alt {
	background: var(--background-secondary);
}

section h2 {
	margin-bottom: 28px;
}

/* A heading that opens a section sits directly under the section's own top
   padding, so the browser default top margin on h2 is pure dead space — it was
   pushing the services grid the better part of a screen down the page. */
section > h2:first-child {
	margin-top: 0;
}

/* Page titles on interior pages: h1 styling without the hero treatment that
   #home h1 carries. */
.page-title {
	margin-block-start: 0;
}

.careers-benefits {
	padding-bottom: 90px;
}

/* Icons come from the inline sprite in partials/icons.html. They size with the
   surrounding text and inherit its colour, the way an icon font did. */
.icon-sprite {
	display: none;
}

.icon {
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: -0.125em;
	flex-shrink: 0;
}

.icon-lg {
	width: 1.25em;
	height: 1.25em;
}

/* Pages with no hero start straight under the nav and need the clearance a
   hero would otherwise provide. */
.section-first {
	padding-top: 120px;
}

/* Whole-card links: the card provides the affordance, so the anchor should not
   also underline and recolour its contents. */
a.service-card,
a.project-card {
	text-decoration: none;
	color: inherit;
}

.page-break {
	display: flex;
	justify-content: center;
	width: 100vw;
	height: 1px;
	background: var(--background-main);
}

hr {
	margin: auto;
	width: 95%;
	height: 1px;
	background: var(--thematic-break-color);
	border: none;
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	margin-inline-end: 0;
}

#home {
	position: relative;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	flex-direction: column;
	padding: 0;
	/* Capped, not just 70vh: the content block is a fixed height pinned to
	   the bottom, so on a tall monitor every extra viewport pixel became empty
	   photo above the logo — 298px at 1080px tall. The cap is above 70vh at
	   laptop heights, so those are unaffected. */
	min-height: min(70vh, 640px);
	overflow-y: hidden;
	overflow-x: hidden;
	background: var(--background-main);
	/* max-width: calc(60.125em + 80px); */
	margin: 0 auto;
	width: 100%;
}

#home > .home-background-image {
	opacity: 0.15;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	min-width: 1200px;
	z-index: -1;
}

.help-text {
	color: var(--text-secondary);
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	opacity: 0;
	animation: fade-in-up 1.25s 1.5s forwards;
}

.title {
	animation: fade-in-up 1.25s;
}

.page > i {
	color: var(--text-primary);
}

#nav-container {
	width: 90vw;
	max-width: 1000px;
	margin: 0 auto;
	padding: 1.5rem 0;
	z-index: var(--z-nav);
}

/* Scoped to the site nav: a bare `nav` selector also caught the breadcrumb and
   spread its links across the full page width. */
#nav-container > nav {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.nav-logo-link {
	display: flex;
	align-items: center;
	z-index: 5;
	text-decoration: none;
}

.nav-logo {
	height: 40px;
	width: auto;
	transition: opacity 0.3s ease;
}

.nav-logo:hover {
	opacity: 0.8;
}

.nav-link {
	margin: 0;
	border: none;
	padding: none;
	background: none;
	color: var(--text-primary);
	font-family: 'Inter', sans-serif;
	font-size: max(16px, 1vw);
	text-transform: none;
	font-weight: 500;
	text-decoration: none;
	transform: translate3d(0, 0, 0);
	position: relative;
	z-index: 4;
}

.nav-link-list {
	display: flex;
	gap: 2vw;
	align-items: center;
}

.nav-dropdown {
	position: relative;
}

.nav-link-dropdown {
	display: flex;
	align-items: center;
	gap: 8px;
}

.dropdown-icon {
	font-size: 12px;
	transition: transform 0.3s ease;
}

.nav-dropdown:hover .dropdown-icon,
.nav-link-dropdown.active .dropdown-icon {
	transform: rotate(180deg);
}

.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: var(--background-main);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	min-width: 600px;
	max-width: 800px;
	max-height: 70vh;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(-10px);
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
	z-index: var(--z-dropdown);
	margin-top: 10px;
}

.dropdown-menu.show {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.dropdown-content {
	padding: 20px;
}

.dropdown-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

/* The services we do not have a page for still belong in the menu — as plain
   text, so nothing here looks clickable unless it goes somewhere. */
.dropdown-section-plain {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--thematic-break-color);
}

.dropdown-section-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--text-secondary);
	margin: 0 0 8px 12px;
}

.dropdown-plain-list {
	list-style: none;
	margin: 0;
	padding: 0 12px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px 16px;
}

.dropdown-plain-list li {
	font-size: 15px;
	color: var(--text-secondary);
	padding: 4px 0 4px 16px;
	position: relative;
}

.dropdown-plain-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 13px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--thematic-break-color);
}

.dropdown-section-note {
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	opacity: 0.75;
	margin-left: 10px;
}

.dropdown-service-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.2s ease;
	text-decoration: none;
	color: inherit;
	min-height: 56px;
}

.dropdown-service-item:hover {
	background-color: var(--background-secondary);
}

.dropdown-service-item:has(.dropdown-service-text:only-child) {
	justify-content: center;
	text-align: center;
}

.dropdown-service-image {
	width: 60px;
	height: 60px;
	min-width: 60px;
	object-fit: cover;
	display: block;
	border-radius: 4px;
}

.dropdown-service-text {
	flex: 1;
}

.dropdown-service-text h4 {
	font-size: 16px;
	font-weight: 500;
	margin: 0;
	color: var(--text-primary);
	line-height: 1.4;
}

.dropdown-service-count {
	display: block;
	font-size: 13px;
	color: var(--accent-color);
	margin-top: 2px;
}

/* About dropdown specific styles */
#about-dropdown .dropdown-service-item {
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 12px;
	padding: 16px;
}

#about-dropdown .dropdown-service-image {
	width: 100%;
	height: 120px;
	min-width: 100%;
	object-fit: cover;
	border-radius: 6px;
}

#about-dropdown .dropdown-service-text {
	flex: none;
	width: 100%;
}

button:hover {
	cursor: pointer;
}

.nav-link::after {
	content: '';
	position: absolute;
	width: 100%;
	transform: scaleX(0);
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: var(--accent-color);
	transition: transform 0.2s ease-out;
}

.nav-link:hover::after {
	transform: scaleX(0.88);
}

.nav-menu-button {
	display: none;
	color: var(--text-primary);
	background: none;
	border: none;
	padding: 5px;
	margin-right: 10px;
	scale: 1.4;
	z-index: 30;
}

.logo-wrapper {
	padding: 0;
	border: none;
	background: transparent;
}

.logo-wrapper > img {
	height: max(40px, 3vw);
	width: max(40px, 3vw);
	z-index: 10;
	animation: fade-in-up 1.25s;
}

.mobile-menu-overlay {
	position: fixed;
	height: 100vh;
	width: 100vw;
	bottom: 100vh;
	left: 0;
	background: var(--background-main);
	transition: bottom 0.5s cubic-bezier(0.45, 0.02, 0.09, 0.98);
	z-index: var(--z-mobile-menu);

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 20px;
}

/* Sits roughly where the hamburger was, which the overlay covers. */
.mobile-menu-close {
	position: absolute;
	top: 22px;
	right: 5vw;
	background: none;
	border: none;
	padding: 8px;
	color: var(--text-primary);
	scale: 1.4;
	line-height: 0;
}

.curtain-wrapper {
	height: 30px;
	overflow: hidden;
}

.curtain-wrapper > .nav-link {
	transition: transform 0.75s cubic-bezier(0.45, 0.02, 0.09, 0.98);
	transition-delay: 0.3s;
	transform: translateY(100%);
}

.show-nav-link {
	transform: translateY(0) !important;
}

.show-menu {
	bottom: 0;
}

.title > img {
	max-width: 80vw;
}

.lined-text::before {
	width: 2px;
	content: '';
	text-decoration: line-through;
	height: 0px;
}

.contact-bar {
	position: relative;
	padding: 10vh 0 10vh;
	color: var(--text-primary);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15vw;
	font-family: 'Inter', sans-serif;
	font-style: normal;
}

.contact-bar a {
	color: var(--text-primary);
	text-decoration: none;
}

.contact-bar a:hover {
	color: var(--accent-color);
}

.contact-bar::before,
.contact-bar::after {
	position: absolute;
	content: ' ';
	width: 95vw;
	background: var(--thematic-break-color);
	height: 1px;
}

.contact-bar::before {
	top: 5vh;
}

.contact-bar::after {
	bottom: 5vh;
}

.contact-bar-title {
	font-size: 24px;
	text-transform: uppercase;
}

.contact-info-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.contact-option {
	list-style-type: none;
	color: var(--text-primary);
	display: grid;
	grid-template-columns: 30px 1fr;
	align-items: center;
}

.contact-option > .icon-container {
	display: flex;
	justify-content: center;
	margin-right: 20px;
}

.large-description-text {
	max-width: 1200px;
	font-size: 26px;
	font-weight: normal;
	margin: 0 auto 28px;
	text-align: left;
	color: var(--text-primary);
	text-transform: none;
	line-height: 150%;
	font-family: 'Inter', sans-serif;
}

.section-intro {
	max-width: 800px;
	margin: 0 auto 36px;
	text-align: center;
	font-size: 20px;
	color: var(--text-secondary);
	line-height: 1.6;
}

/* About Section */
.about-content {
	max-width: 1200px;
	margin: 0 auto;
}

.about-details {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	margin-top: 60px;
}

.about-column h3 {
	font-size: 28px;
	margin-bottom: 20px;
}

.about-column p {
	font-size: 18px;
	line-height: 1.8;
	color: var(--text-secondary);
}

.about-read-more {
	display: flex;
	gap: 20px;
	justify-content: center;
	margin-top: 28px;
	flex-wrap: wrap;
}

.tertiary-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	background: transparent;
	color: var(--accent-color);
	text-decoration: none;
	border-radius: 0;
	border: 2px solid var(--accent-color);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.3px;
	transition: background-color 0.3s ease, color 0.3s ease, gap 0.3s ease;
}

.tertiary-button i {
	font-size: 12px;
	transition: transform 0.3s ease;
}

.tertiary-button:hover {
	background: var(--accent-color);
	color: white;
	gap: 10px;
}

.tertiary-button:hover i {
	transform: translateX(3px);
}

/* Team Grid */









/* Services Section */
/* Fixed 4 -> 2 -> 1, never 3.
   The featured cards span two columns, and ARC picked which services get one so
   that the spans tile exactly: 16 column-units is four full rows at 4 columns
   and eight at 2. Three columns is the one count where that arithmetic fails —
   it strands an empty cell beside Millwrighting — so the grid skips it rather
   than letting auto-fit wander into it on a 13-inch laptop. */
.services-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
	max-width: 1400px;
	margin: 0 auto;
}

@media screen and (max-width: 1200px) {
	.services-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.service-card {
	background: var(--background-main);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.service-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.service-image {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}

.service-content {
	padding: 24px;
	position: relative;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.service-content h3 {
	font-size: 24px;
	margin-bottom: 12px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.service-content p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--text-secondary);
	margin: 0;
}

.service-chevron {
	color: var(--accent-color);
	font-size: 18px;
	transition: transform 0.3s ease, color 0.3s ease;
	flex-shrink: 0;
	margin-top: 6px;
}

.service-card:hover .service-chevron {
	transform: translateX(5px);
	color: var(--text-primary);
}

/* Projects Section */
.projects-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 40px;
	max-width: 1400px;
	margin: 0 auto;
}

.project-card {
	background: var(--background-main);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: block;
}

.project-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

a.project-card {
	cursor: pointer;
}

.project-image {
	width: 100%;
	height: 250px;
	object-fit: cover;
	display: block;
}

.project-content {
	padding: 24px;
}

.project-content h3 {
	font-size: 24px;
	margin-bottom: 12px;
}

.project-content p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--text-secondary);
	margin-bottom: 16px;
}

.project-tag {
	display: inline-block;
	background: var(--background-secondary);
	color: var(--text-primary);
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 14px;
	margin-right: 8px;
	margin-top: 8px;
}

/* Careers Section */
.careers-content {
	max-width: 1400px;
	margin: 0 auto;
}

.careers-content:has(.careers-openings) {
	max-width: 100%;
	margin-bottom: 24px;
}

/* Was .careers-hero, back when the page opened on this block. It has a real
   hero above it now, so this is the intro to the benefits section. */
.careers-intro {
	max-width: 1000px;
	margin: 0 auto 64px;
	text-align: center;
}

/* One heading scale on this page, the same as the service pages. */
.careers-intro h2,
.careers-openings h2 {
	font-size: 36px;
	margin-bottom: 20px;
}

.careers-intro-text {
	font-size: 20px;
	line-height: 1.8;
	color: var(--text-secondary);
	max-width: 800px;
	margin: 0 auto;
}

.careers-benefits-alternating {
	max-width: 1400px;
	margin: 0 auto 80px;
}

.benefit-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	margin-bottom: 80px;
}

@media screen and (max-width: 850px) {
	.benefit-section {
		display: flex;
		flex-direction: column;
		gap: 40px;
		margin-bottom: 60px;
	}

	.benefit-image-right {
		flex-direction: column-reverse;
	}
}

.benefit-section:last-child {
	margin-bottom: 0;
}

.benefit-image-left,
.benefit-image-right {
	grid-template-columns: 1fr 1fr;
}

.benefit-image-right .benefit-image {
	order: 2;
}

.benefit-image-right .benefit-content {
	order: 1;
}

.benefit-image {
	width: 100%;
	height: 400px;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.benefit-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.benefit-section:hover .benefit-image img {
	transform: scale(1.05);
}

.benefit-content {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.benefit-content i {
	color: var(--accent-color);
	margin-bottom: 8px;
}

.benefit-content h3 {
	font-size: 28px;
	text-align: left;
	margin-bottom: 8px;
	color: var(--text-primary);
}

.benefit-content p {
	font-size: 18px;
	line-height: 1.8;
	color: var(--text-secondary);
	margin: 0;
}

.careers-openings {
	background: #ffffff;
	padding: 40px;
	border-radius: 8px;
	margin-top: 40px;
	width: calc(100% - 10vw);
}

.careers-openings h2 {
	text-align: left;
}

.careers-openings > p {
	font-size: 18px;
	line-height: 1.8;
	color: var(--text-secondary);
	margin-bottom: 20px;
}

.openings-list {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	margin-bottom: 24px;
}

/* Tinted, not white: the card behind them is already white, so white chips on
   it were invisible. */
.openings-list li {
	padding: 12px 14px;
	background: var(--background-secondary);
	border-left: 3px solid var(--accent-color);
	border-radius: 4px;
	font-size: 16px;
	color: var(--text-primary);
}

.careers-contact {
	font-size: 18px;
	color: var(--text-primary);
	margin-top: 24px;
}

.careers-contact a {
	color: var(--accent-color);
	text-decoration: none;
}

.careers-contact a:hover {
	text-decoration: underline;
}

@media screen and (max-width: 1050px) {
	h4,
	p {
		font-size: 18px;
	}
}

@media screen and (max-width: 840px) {
	.large-description-text {
		text-align: center;
		font-size: 20px;
	}

	.section-intro {
		font-size: 18px;
	}

	:root {
		--textLarge: 36px;
	}
}

@media screen and (max-width: 900px) {
	/* The menu used to be 90vw centred on its trigger button — but the trigger
	   is not centred in the nav, so 30-75px of the menu sat past the right edge
	   of the viewport, unreachable behind body { overflow-x: hidden }.
	   Anchoring to #nav-container instead makes it span exactly the nav width,
	   which is always inside the viewport. */
	#nav-container {
		position: relative;
	}

	.nav-dropdown {
		position: static;
	}

	.dropdown-menu {
		left: 0;
		right: 0;
		width: auto;
		min-width: 0;
		max-width: none;
		transform: translateY(-10px);
	}

	.dropdown-menu.show {
		transform: translateY(0);
	}

	.dropdown-content {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 700px) {
	.page-hero {
		padding: 80px 5vw 60px;
	}

	.page-hero h1 {
		font-size: 34px;
	}

	.page-hero p {
		font-size: 18px;
	}

	.story-section {
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.story-lead {
		font-size: 20px;
		padding-left: 16px;
	}


	h1,
	h2 {
		font-size: 36px;
		letter-spacing: 1px;
	}

	:root {
		--textLarge: 28px;
	}

	section {
		padding: 60px 5vw;
	}

	#home h1 {
		font-size: 36px;
	}

	.contact-bar {
		flex-direction: column;
		gap: 20px;
	}

	#nav-container {
		width: calc(100vw - 10vw);
		padding: 10px 5vw;
	}

	.nav-link-list {
		display: none;
	}

	.nav-menu-button {
		display: block;
	}

	.nav-link {
		font-size: 22px;
	}

	.nav-link-list > .nav-link {
		animation: none;
	}

	.help-text {
		font-size: 14px;
	}

	.dropdown-menu {
		min-width: 95vw;
		max-width: 95vw;
	}

	.about-details {
		grid-template-columns: 1fr;
		gap: 30px;
	}

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




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

	.benefit-section {
		grid-template-columns: 1fr;
		gap: 40px;
		margin-bottom: 60px;
	}

	.benefit-image {
		order: 1;
		height: 300px;
	}

	.benefit-content {
		order: 2;
		text-align: center;
	}

	.benefit-content h4 {
		font-size: 24px;
	}

	.careers-hero {
		margin-bottom: 60px;
	}

	.careers-hero h3 {
		font-size: 28px;
	}

	.careers-hero-text {
		font-size: 18px;
	}

	.careers-benefits-alternating {
		margin-bottom: 60px;
	}

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

	.careers-openings {
		padding: 24px;
	}

			

}

@media screen and (max-width: 840px) {
	#home {
		min-height: 60vh;
	}

	#home h1 {
		font-size: 30px;
	}

	.hero-content {
		padding-bottom: 5vh;
	}

	.hero-logo {
		max-width: 200px;
		margin-bottom: 18px;
	}

	.hero-cta-row {
		display: grid;
		grid-template-columns: 1fr;
		gap: 10px;
		margin-top: 22px;
		width: 100%;
		max-width: 320px;
	}

	.hero-cta-primary,
	.hero-cta-phone {
		font-size: 16px;
		padding: 13px 20px;
		justify-content: center;
	}
}

@media screen and (max-width: 500px) {
	h4,
	p {
		font-size: 16px;
	}

	/* Still needs to fit logo + headline + CTAs, so this no longer drops to 35vh. */
	#home {
		min-height: 58vh;
	}

	#home h1 {
		font-size: 28px;
	}

	.hero-content {
		padding-bottom: 4vh;
	}

	.hero-logo {
		max-width: 180px;
		margin-bottom: 16px;
	}
}

@keyframes appear {
	from {
		transform: translateY(30px);
	}

	to {
		transform: translateY(0);
	}
}

@keyframes fade-in-up {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	80% {
		transform: translateY(0);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slide-in {
	from {
		height: 10vh;
	}

	to {
		height: 100vh;
	}
}

/* ========================================================================
   Post content — projects and skills sourced from content/
   ======================================================================== */

/* ---- cards, used in the homepage Projects grid and service work strips ---- */

.post-card {
	background: var(--background-main);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

a.post-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.post-card-image {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
	background: var(--background-secondary);
}

.post-card-body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.post-card-body h3 {
	font-size: 22px;
	line-height: 1.3;
	margin: 0 0 8px;
}

.post-card-meta {
	font-size: 14px;
	color: var(--text-secondary);
	margin: 0 0 16px;
}

.post-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
}

.post-tag {
	display: inline-block;
	background: var(--background-secondary);
	color: var(--text-secondary);
	padding: 5px 11px;
	border-radius: 3px;
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
}

a.post-tag:hover {
	background: var(--accent-color);
	color: #fff;
}

/* ---- service cards: badge and the expanded treatment ---- */

/* Services with real work behind them get a count and a wider card, so the ones
   ARC can evidence stand out from the ones that are still just a description. */
.service-badge {
	display: inline-block;
	align-self: flex-start;
	background: rgba(0, 102, 204, 0.1);
	color: var(--accent-color);
	font-size: 13px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 3px;
	margin-bottom: 12px;
}

/* A service with no page of its own is a plain card, not a link: no chevron,
   no lift, nothing that promises somewhere to click through to. */
.service-card-static:hover {
	transform: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Named jobs under a featured service. Thumbnails alone read as texture at this
   size; the title is what tells a reader what ARC actually did. */
.service-jobs {
	list-style: none;
	/* auto pushes the list to the foot of the card, so a service with one job
	   does not leave a gap when it sits beside one with three. The gap above the
	   rule comes off the paragraph, since an auto margin collapses to nothing
	   once the card runs out of slack. */
	margin: 0;
	margin-top: auto;
	padding: 16px 0 0;
	border-top: 1px solid var(--thematic-break-color);
}

.service-content p:has(+ .service-jobs),
.service-content p:has(+ .service-caps) {
	margin-bottom: 18px;
}

/* Shown in place of the job list on a service with no tagged work yet. Same
   position and rule, so a row of cards still lines up along the bottom. */
.service-caps {
	list-style: none;
	margin: 0;
	margin-top: auto;
	padding: 16px 0 0;
	border-top: 1px solid var(--thematic-break-color);
}

.service-caps li {
	position: relative;
	padding: 7px 0 7px 18px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--text-secondary);
}

.service-caps li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 14px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent-color);
}

/* Two lines per job: the title gets the full width of the card and the date
   sits under it. Side by side, a long location left titles as "S…". */
.service-jobs li {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	align-items: start;
	gap: 2px 12px;
	padding: 8px 0;
}

.service-job-thumb {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
	background: var(--background-alt);
	grid-row: span 2;
}

.service-job-title {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--text-primary);
	/* Two lines at most, so one long headline cannot stretch the card. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.service-job-meta {
	font-size: 13px;
	color: var(--text-secondary);
}

/* Brand-led card header: the sub-brand mark over its own service photo, dimmed
   right down so the logo carries the card. */
.service-image-brand {
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	isolation: isolate;
}

.service-image-brand::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(8, 12, 18, 0.72), rgba(8, 12, 18, 0.88));
}

/* Both marks ship with their background baked in; screen drops the black into
   the panel behind it. See the sub-brand block further down. */
.service-card-logo {
	position: relative;
	width: auto;
	height: auto;
	max-width: 72%;
	max-height: 62%;
	object-fit: contain;
	mix-blend-mode: screen;
}

/* A mark supplied with real transparency needs no blend to drop its background,
   and screening one would wash out its dark areas. */
.service-card-logo-opaque {
	mix-blend-mode: normal;
}

/* ========================================================================
   Contact page
   ======================================================================== */

.contact-page {
	padding: 70px 5vw 90px;
}

.contact-page-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
	gap: 72px;
	max-width: 1200px;
	margin: 0 auto;
}

.contact-page h2 {
	font-size: 32px;
	text-align: left;
	margin-bottom: 28px;
}

/* Scoped to this page: contact-form.css deliberately styles nothing by element
   name, because it loads everywhere. */
.contact-page-form .field {
	display: flex;
	flex-direction: column;
	margin-bottom: 18px;
}

.contact-page-form .field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.contact-page-form label {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-primary);
	margin-bottom: 6px;
}

.contact-page-form label span {
	color: var(--accent-color);
	margin-left: 2px;
}

.contact-page-form input,
.contact-page-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid #d5d8dd;
	border-radius: 4px;
	font-size: 16px;
	font-family: 'Inter', sans-serif;
	color: var(--text-primary);
	background: var(--background-main);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-page-form input:focus,
.contact-page-form textarea:focus {
	outline: none;
	border-color: var(--accent-color);
	box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
}

.contact-page-form textarea {
	resize: vertical;
	min-height: 150px;
	line-height: 1.6;
}

.contact-page-form button[type='submit'] {
	display: inline-flex;
	align-items: center;
	padding: 14px 32px;
	background: var(--accent-color);
	color: #fff;
	border: none;
	border-radius: 2px;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.contact-page-form button[type='submit']:hover {
	background: #0052a3;
}

.contact-page-form button[type='submit'][disabled] {
	background: #8fb8e0;
	cursor: default;
}

.contact-page-form .contact-form-status {
	font-size: 16px;
}

/* ---- the details column ---- */

.contact-page-details h3 {
	font-size: 18px;
	margin-bottom: 8px;
}

.contact-detail-list {
	list-style: none;
	margin: 0 0 36px;
	padding: 0;
}

.contact-detail-list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--thematic-break-color);
}

.contact-detail-list .icon {
	color: var(--accent-color);
	margin-top: 4px;
	flex-shrink: 0;
}

.contact-detail-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--text-secondary);
	margin-bottom: 2px;
}

.contact-detail-list a {
	font-size: 18px;
	color: var(--text-primary);
	text-decoration: none;
	word-break: break-word;
}

.contact-detail-list a:hover {
	color: var(--accent-color);
	text-decoration: underline;
}

.contact-detail-note {
	display: block;
	font-size: 14px;
	color: var(--text-secondary);
	margin-top: 2px;
}

.contact-detail-block {
	margin-bottom: 28px;
}

.contact-detail-block p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-secondary);
	margin: 0;
}

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

@media screen and (max-width: 900px) {
	.contact-page-inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}
}

@media screen and (max-width: 560px) {
	.contact-page-form .field-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* ---- Recent work block on service pages ---- */

/* The 5vw gutter is the page's left edge, so no max-width here — a centred
   1400px box would drift right of the sections above it on a wide screen. The
   cap goes on the card grid instead. */
.recent-work {
	padding: 70px 5vw;
}

.recent-work h2,
.recent-work .section-intro {
	text-align: left;
}

.recent-work h2 {
	font-size: 36px;
	margin-bottom: 12px;
}

.recent-work .section-intro {
	margin: 0 0 44px;
}

/* Services have anywhere from one to six posts. Capping the column width stops
   a lone card stretching across the full page. */
.recent-work .projects-grid {
	grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
	justify-content: start;
	max-width: 1400px;
	margin: 0;
}

/* ---- generated project pages ---- */

.project-hero {
	background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.7)),
		url('/images/arc-ironworking-full.webp');
}

.project-eyebrow {
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
	margin: 0 0 10px;
}

.project-hero-meta {
	font-size: 17px !important;
	color: rgba(255, 255, 255, 0.85) !important;
}

.project-body {
	padding-top: 70px;
	padding-bottom: 70px;
}

.project-content {
	max-width: 680px;
	margin: 0 auto;
}

.project-content p {
	font-size: 18px;
	line-height: 1.85;
	color: var(--text-secondary);
	margin: 0 0 24px;
}

.post-list {
	margin: 0 0 24px;
	padding-left: 22px;
}

.post-list li {
	font-size: 18px;
	line-height: 1.7;
	color: var(--text-secondary);
	margin-bottom: 8px;
}

.project-services {
	margin-top: 44px;
	padding-top: 32px;
	border-top: 1px solid var(--thematic-break-color);
}

.project-services h2 {
	font-size: 20px;
	text-align: left;
	margin-bottom: 16px;
}

/* Needs the parent in the selector: .project-content p sets the margin
   shorthand and outranks a lone class, so a bare .project-source rule was
   silently losing its margin-top. */
.project-content .project-source {
	margin-top: 40px;
}

.project-source a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--accent-color);
	text-decoration: none;
	font-weight: 500;
}

.project-source a:hover {
	text-decoration: underline;
}

.project-gallery-section {
	max-width: 1400px;
	margin: 0 auto;
	padding: 70px 5vw;
}

.project-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 28px;
	max-width: 1100px;
	margin: 0 auto;
}

.project-figure {
	margin: 0;
}

/* Sources are LinkedIn-sized, so images are contained rather than full-bleed —
   a 480px original stretched across a hero would look obviously poor.
   A fixed aspect ratio keeps rows aligned when portrait and landscape shots are
   mixed, which they almost always are. */
.project-figure img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
	display: block;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 700px) {
	.post-card-image {
		height: 190px;
	}

	.project-body,
	.project-gallery-section,
	.recent-work {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.project-gallery {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* ========================================================================
   Sub-brands — ARC Rapid Response and ARC Industrial Power
   ======================================================================== */

/* Both logos ship with their background baked in (RR on black, Power on gold-
   on-white/black), and the RR badge has black outlines that would be punched
   through by keying. So they sit on matching dark panels instead. */

.service-brand-logo {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	margin: 0 auto 18px;
	mix-blend-mode: screen;
}

.service-hero-brand {
	padding-top: 90px;
}

.service-brand-badge {
	display: block;
	width: 100%;
	max-width: 200px;
	height: auto;
	margin: 0 auto 24px;
	mix-blend-mode: screen;
}

/* Brand label above the title on a highlighted service card. */
.service-brand {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--accent-color);
	margin-bottom: 8px;
}

/* The featured treatment: two columns wide, a taller image, and an accent rule
   along the top. The rule used to mark a sub-brand; it now marks "featured",
   and the brands are distinguished by their logo panel instead. */
.service-card-feature {
	grid-column: span 2;
	border-top: 3px solid var(--accent-color);
}

.service-card-feature .service-image {
	height: 260px;
}

/* Must come after the rule above, not in the mobile block higher up the file:
   same specificity, so source order decides. When it lost, "span 2" still
   applied at phone widths and grid invented a second column to span into —
   which collapsed to 0px and left every card mis-sized. */
@media screen and (max-width: 700px) {
	.service-card-feature {
		grid-column: span 1;
	}
}

/* ---- Rapid Response: why us / industries ---- */

.rr-why {
	max-width: 1400px;
	margin: 0 auto;
	padding: 70px 5vw;
}

/* Left-aligned, not centred: everything below the hero on a service page hangs
   off the same 5vw gutter. */
.rr-why-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 48px;
	max-width: 1000px;
	margin: 0;
}

.rr-why h2 {
	font-size: 36px;
	text-align: left;
	margin-bottom: 20px;
}

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

.rr-list li {
	font-size: 18px;
	line-height: 1.6;
	color: var(--text-secondary);
	padding: 9px 0 9px 26px;
	position: relative;
}

.rr-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 17px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--accent-color);
}

.brand-contact {
	max-width: 1000px;
	margin: 44px 0 0;
	padding-top: 28px;
	border-top: 1px solid var(--thematic-break-color);
	font-size: 18px;
	color: var(--text-primary);
}

.brand-contact a {
	color: var(--accent-color);
	font-weight: 500;
}

@media screen and (max-width: 700px) {
	.service-brand-logo {
		max-width: 280px;
	}

	.service-brand-badge {
		max-width: 150px;
	}

	.rr-why {
		padding: 48px 5vw;
	}

	.rr-why-inner {
		gap: 32px;
	}
}