/*
 * landloilfield.ca plain HTML site
 * One stylesheet for every page. Block names follow BEM (block__element--modifier).
 * Sizes and colours were measured from the WordPress site as it stood on Nov 9 2026.
 *
 * Breakpoints used below:
 *   1280px and wider  full header with the menu across the top
 *   1280px to 1439px  the same, with the email shown as an icon
 *   769px to 1279px   short header with the menu behind a button, content in columns
 *   481px to 768px    content stacks, lists stay in columns
 *   480px and below   phone layout
 *   379px and below   narrow phones: a slightly smaller logo so the header fits
 */

/* ---------- Fonts (self hosted, SIL Open Font Licence, see /assets/fonts) ---------- */

@font-face {
	font-family: "Anton";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/anton-latin-400.woff2") format("woff2");
}

@font-face {
	font-family: "Raleway";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/raleway-latin-400.woff2") format("woff2");
}

/* ---------- Design tokens ---------- */

:root {
	--color-blue: #263d96;
	--color-blue-band: rgba(38, 61, 150, 0.71);
	--color-frame-blue: #0055a5;
	--color-text: #757575;
	--color-heading: #333;
	--color-heading-soft: #3b3a3c;
	--color-link: #2b7bb9;
	--color-rule: #e0e0e0;
	--color-tile: #f3f3f3;
	--color-white: #fff;
	--color-bottom-line: #2d2d2d;
	--color-gallery-mask: rgba(0, 85, 165, 0.75);

	--font-body: "Helvetica", Verdana, Arial, sans-serif;
	--font-display: "Anton", "Helvetica", Arial, sans-serif;
	--font-caption: "Raleway", "Helvetica", Arial, sans-serif;

	--container: 1740px;
	--gutter: 40px;
	--header-overlap: 61px;
	--notch-width: 650px;
}

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

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--color-white);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.45;
	overflow-x: clip;
}

img,
svg {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: var(--color-link);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	text-decoration: underline;
}

h1,
h2,
h3,
h4,
p,
ul,
figure {
	margin: 0;
}

h1,
h2,
h3,
h4 {
	font-weight: 400;
	color: var(--color-heading);
}

ul {
	padding: 0;
	list-style: none;
}

button {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 3px solid var(--color-link);
	outline-offset: 2px;
}

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--color-white);
	color: var(--color-blue);
	font-weight: 600;
	transform: translateY(-200%);
}

.skip-link:focus-visible {
	transform: none;
}

.icon {
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: middle;
}

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

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

.button {
	display: inline-block;
	min-height: 35px;
	padding: 5px 10px;
	border: 2px solid var(--color-blue);
	background: transparent;
	color: var(--color-blue);
	font-size: 14px;
	line-height: 1.45;
	text-align: center;
	transition: background-color 0.2s, color 0.2s;
}

.button:hover,
.button:focus-visible {
	background: var(--color-blue);
	color: var(--color-white);
	text-decoration: none;
}

.button .icon {
	width: 8px;
	height: 16px;
	margin: -2px 0 0 8px;
}

.button--light {
	border-color: var(--color-white);
	color: var(--color-white);
}

.button--light:hover,
.button--light:focus-visible {
	background: var(--color-white);
	color: var(--color-blue);
}

.button--wide {
	width: 250px;
	max-width: 100%;
}

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

.site-header {
	position: absolute;
	inset: 0 0 auto;
	z-index: 20;
	color: var(--color-white);
}

/* The white corner behind the logo. */
.site-header__notch {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: var(--notch-width);
	height: 320px;
	background: var(--color-white);
	clip-path: polygon(0 0, 100% 0, 0 100%);
	pointer-events: none;
}

.site-header__logo {
	position: absolute;
	top: 9px;
	left: 35px;
	z-index: 3;
	display: block;
	width: 140px;
}

.site-header__logo img {
	width: 100%;
}

.site-header__bar {
	position: relative;
	height: 65px;
	background: var(--color-blue);
}

.site-header__bar-inner {
	display: grid;
	grid-template-columns: 224px 223px minmax(0, 1fr) auto;
	align-items: center;
	height: 100%;
	margin-left: calc(var(--notch-width) - 18px);
	padding-right: 57px;
}

.site-header__quote {
	justify-self: start;
	width: 193px;
	white-space: nowrap;
}

.site-header__contact {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	justify-self: start;
	color: var(--color-white);
	font-size: 14px;
	white-space: nowrap;
}

.site-header__contact:hover,
.site-header__contact:focus-visible {
	color: var(--color-rule);
	text-decoration: none;
}

.site-header__contact .icon {
	font-size: 25px;
}

.site-header__contact .icon--phone-alt {
	display: none;
}

.social {
	display: flex;
	align-items: center;
	gap: 14px;
}

.social a {
	display: block;
	color: var(--color-white);
}

.social .icon {
	width: 23px;
	height: 30px;
}

.site-header__band {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 122px;
	padding: 15px 35px 15px 15px;
	background: var(--color-blue-band);
}

.site-header__menu-button {
	display: none;
}

/* ---------- Main menu ---------- */

.site-nav__close {
	display: none;
}

.site-nav__list {
	display: flex;
	align-items: center;
}

.site-nav__item {
	position: relative;
}

.site-nav__link {
	position: relative;
	display: block;
	padding: 6px 10px 17px;
	border: 0;
	background: none;
	color: var(--color-white);
	font-size: 20px;
	font-weight: 700;
	line-height: 29px;
	text-transform: uppercase;
	cursor: pointer;
}

.site-nav__link::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 10px;
	width: 0;
	height: 3px;
	background: var(--color-white);
	transition: width 0.25s;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
	text-decoration: none;
}

.site-nav__item:hover > .site-nav__link::after,
.site-nav__link:focus-visible::after {
	width: calc(100% - 20px);
}

.site-nav__item--parent > .site-nav__link {
	padding-right: 35px;
}

.site-nav__item--parent > .site-nav__link--button::before,
.site-nav__toggle::before {
	content: "";
	position: absolute;
	top: 22px;
	right: 18px;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--color-white);
	border-bottom: 2px solid var(--color-white);
	transform: rotate(45deg);
}

.site-nav__toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 35px;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.site-nav__sub {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 5;
	display: none;
	width: 300px;
	background: rgba(38, 61, 150, 0.72);
}

.site-nav__item--parent:hover > .site-nav__sub,
.site-nav__item--parent:focus-within > .site-nav__sub,
.site-nav__item--parent.is-open > .site-nav__sub {
	display: block;
}

.site-nav__item--parent.is-closed > .site-nav__sub {
	display: none;
}

.site-nav__sub a {
	display: flex;
	align-items: center;
	gap: 0.55em;
	padding: 10.5px 20px;
	color: var(--color-white);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.45;
	text-transform: uppercase;
}

.site-nav__sub--bullets a::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
}

.site-nav__sub a:hover,
.site-nav__sub a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---------- Page top: space under the header, and the hero pictures ---------- */

.site-main {
	padding-top: var(--header-overlap);
}

.page-top-space {
	height: 180px;
}

.hero {
	position: relative;
	height: 720px;
	overflow: hidden;
	--hero-position: 70% 0%;
}

.hero--short {
	height: 450px;
	--hero-position: 50% 0%;
}

.hero--right {
	--hero-position: 100% 0%;
}

/* On wider screens the picture stays still while the page scrolls over it,
   like the old site. The clip box keeps the fixed picture inside the hero. */
.hero__clip {
	position: absolute;
	inset: 0;
	clip: rect(0, auto, auto, 0);
}

.hero__img {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	object-fit: cover;
	object-position: var(--hero-position);
}

/* White corner cut into the bottom right of a hero. */
.hero::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 300px;
	height: 120px;
	background: var(--color-white);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.hero--big-notch::after {
	width: var(--notch-width);
	height: 320px;
}

/* ---------- Sections, headings and text ---------- */

.section {
	position: relative;
	isolation: isolate;
}

/* Grey corner behind the last section of most pages. */
.section--grey-corner::before,
.section--grey-corner-left::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: -1;
	width: 850px;
	height: 520px;
	background: var(--color-rule);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.section--grey-corner-left::before {
	right: auto;
	left: 0;
	clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* The corner is wider than a phone. Keep it inside its section so the page
   never scrolls sideways (the part cut off was off screen anyway). */
.section--grey-corner,
.section--grey-corner-left {
	overflow-x: clip;
}

.title {
	color: var(--color-blue);
	font-family: var(--font-display);
	font-size: 80px;
	line-height: 1.4;
}

.heading {
	color: var(--color-blue);
	font-family: var(--font-display);
	font-size: 50px;
	line-height: 1.4;
}

.heading--dark {
	color: var(--color-heading);
}

.heading--soft {
	color: var(--color-heading-soft);
}

.heading--small {
	font-size: 36px;
}

.subheading {
	color: var(--color-heading-soft);
	font-size: 36px;
	line-height: 1.4;
}

.lead {
	font-size: 30px;
	line-height: 1.45;
}

.lead--medium {
	font-size: 24px;
}

.text p + p {
	margin-top: 1.45em;
}

/* A link that sits in a line of plain text is underlined, so it does not
   rely on colour alone. Links that fill a whole line keep the old look. */
.link-inline {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.rule {
	height: 0;
	margin: 20px 0;
	border: 0;
	border-top: 1px solid var(--color-rule);
}

/* ---------- Lists with a blue arrow ---------- */

.arrow-list li {
	position: relative;
	margin-bottom: 20px;
	padding-left: 20px;
	line-height: 20.3px;
}

.arrow-list li::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 0;
	width: 8px;
	height: 12.5px;
	background: var(--color-blue);
	-webkit-mask: url("../img/arrow.svg") no-repeat center / contain;
	mask: url("../img/arrow.svg") no-repeat center / contain;
}

.arrow-list--bold li {
	font-weight: 700;
}

.services__columns > div > .arrow-list + .arrow-list {
	margin-top: 20px;
}

/* ---------- Picture frames ---------- */

.frame {
	position: relative;
	border: 5px solid var(--color-rule);
	overflow: hidden;
}

.frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.photo-blue {
	border: 5px solid var(--color-frame-blue);
}

.photo {
	margin-inline: auto;
}

.photo--natural {
	width: auto;
}

.photo--300 {
	width: 300px;
}

.photo--400 {
	width: 400px;
}

/* ---------- Service page layout (the 12 service pages share this) ---------- */

.intro {
	padding: var(--intro-pad, 80px) 0 40px;
}

.intro__grid {
	display: grid;
	grid-template-columns: minmax(0, var(--intro-text, 60fr)) minmax(0, var(--intro-photo, 40fr));
	align-items: start;
	column-gap: 80px;
}

.intro__photo {
	height: var(--photo-h, 400px);
	margin-top: var(--photo-offset, 20px);
}

.intro__photo--right img {
	object-position: 100% 50%;
}

.corporate-intro__question {
	margin-top: 0;
}

.corporate-more__lead {
	margin-bottom: 20px;
}

.services {
	padding: 20px 0 60px;
}

.services__columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--gutter);
	padding-top: 20px;
}

.services__actions .button {
	margin-bottom: 20px;
}

.services__email {
	padding-top: 5px;
}

.services__wide-photo {
	height: 400px;
	margin: 51px 0 20px;
	border: 0;
}

.services__photos {
	display: grid;
	gap: 20px;
	justify-items: center;
	align-content: start;
	padding-bottom: 20px;
}

.services__photos--inset img {
	max-width: calc(100% - 20px);
}

.services__photos--fill img {
	width: 100%;
}

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

.home-heading {
	padding: 70px 0 20px;
	color: var(--color-blue);
	font-size: 75px;
	line-height: 1.4;
	text-align: center;
}

.home-services {
	padding-bottom: 146px;
}

.tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: start;
	gap: 20px;
	margin-inline: -10px;
	padding-top: 30px;
}

.tile {
	position: relative;
	background: var(--color-tile);
}

.tile img {
	width: 100%;
}

.tile__label {
	padding: 20px 10px 20px;
	color: var(--color-blue);
	font-size: 20px;
	line-height: 1.45;
	text-align: center;
}

.tile__link {
	color: inherit;
}

.tile__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.tile__link:hover,
.tile__link:focus-visible {
	text-decoration: none;
}

.tile:hover .tile__label,
.tile:focus-within .tile__label {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---------- About ---------- */

.about-intro {
	padding: 82px 0 60px;
}

.about-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 800fr) minmax(0, 520fr);
	column-gap: 40px;
	align-items: start;
}

.about-intro .lead {
	margin: 20px 0 30px;
}

.about-intro__photo {
	width: 480px;
	margin: 0 auto;
}

.about-history {
	padding: 40px 0 91px;
}

.about-history__grid {
	display: grid;
	grid-template-columns: minmax(0, 630fr) minmax(0, 690fr);
	column-gap: 40px;
	align-items: start;
	padding: 60px 0 90px;
	border-top: 1px solid var(--color-rule);
}

.about-history__grid > img {
	margin-top: 39px;
}

.about-history__grid .heading {
	margin-bottom: 20px;
}

.values {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 40px;
	padding-top: 80px;
	border-top: 1px solid var(--color-rule);
}

.values__item {
	padding-right: 40px;
}

.values__icon {
	display: grid;
	place-items: center;
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: var(--color-blue);
	color: var(--color-white);
}

.values__icon .icon {
	width: 57px;
	height: 57px;
}

.values__item .subheading,
.values__item .heading {
	margin-bottom: 21px;
}

.community {
	padding: 80px 0 80px;
}

.community .text {
	margin-top: 20px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--color-rule);
}

.community__lists {
	display: grid;
	grid-template-columns: 310fr 310fr 268fr 352fr;
	column-gap: var(--gutter);
	padding-top: 40px;
}

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

.services-top {
	padding: 40px 0 50px;
}

.services-top .lead {
	margin-top: 20px;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.gallery__item {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
}

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

.gallery__caption {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 10px;
	background: var(--color-gallery-mask);
	color: var(--color-white);
	font-family: var(--font-caption);
	font-size: 14px;
	text-align: center;
	opacity: 0;
	transition: opacity 0.15s linear;
}

.gallery__item:hover .gallery__caption,
.gallery__item:focus-visible .gallery__caption {
	opacity: 1;
}

.offer {
	padding-top: var(--offer-top, 80px);
}

.offer__tags {
	margin-top: 20px;
	font-weight: 700;
	white-space: pre;
}

.offer__intro {
	margin-top: 20px;
}

.offer__grid {
	display: grid;
	grid-template-columns: minmax(0, 590fr) minmax(0, 345fr) minmax(0, 345fr);
	align-items: start;
	column-gap: 40px;
	margin-top: var(--photo-gap, 30px);
}

.offer__grid--photo-right {
	grid-template-columns: minmax(0, 345fr) minmax(0, 345fr) minmax(0, 590fr);
}

.offer__grid .arrow-list {
	margin-top: var(--list-offset, 39px);
}

.offer__photo {
	height: 350px;
}

.offer__rule {
	margin: 80px 0 0;
}

.offer:last-of-type {
	padding-bottom: 80px;
}

/* Spacing measured on each section of the old page. */
.offer--construction { --offer-top: 80px; --list-offset: 39px; }
.offer--maintenance { --list-offset: 54px; }
.offer--welding { --offer-top: 40px; --photo-gap: 50px; --list-offset: 24px; }
.offer--facilities { --list-offset: 74px; }
.offer--fleet { --offer-top: 40px; --photo-gap: 50px; --list-offset: 75px; }

/* ---------- Careers ---------- */

.page-heading {
	padding: 80px 0 0;
}

.page-heading .rule {
	margin: 20px 0 0;
}

.careers {
	padding: 90px 0 82px;
}

.careers__grid {
	display: grid;
	grid-template-columns: minmax(0, 800fr) minmax(0, 520fr);
	column-gap: 40px;
	align-items: start;
}

.careers__intro {
	grid-column: 1 / -1;
	max-width: 870px;
	margin-bottom: 40px;
}

.careers__intro .heading {
	margin-bottom: 10px;
}

.careers__main .heading {
	margin: 20px 0;
}

.careers__main .careers__positions {
	margin: 41px 0 21px;
}

.arrow-list--tight li {
	margin-bottom: 5px;
}

.careers__side {
	margin-top: 10px;
	text-align: right;
}

.careers__side .subheading {
	color: var(--color-heading);
	font-size: 35px;
}

.careers__side p {
	margin: 10px 0 40px;
}

.careers__side .photo-blue {
	width: 500px;
	margin-inline: auto;
}

/* ---------- Locations ---------- */

.locations {
	padding: 80px 0 40px;
}

.locations__grid {
	display: grid;
	grid-template-columns: minmax(0, 520fr) minmax(0, 800fr);
	column-gap: 40px;
	align-items: start;
}

.contact-card {
	display: grid;
	grid-template-columns: 75px minmax(0, 1fr);
	align-items: start;
	column-gap: 20px;
	padding: 40px 0;
	border-bottom: 1px solid var(--color-rule);
}

.contact-card .icon {
	width: 75px;
	height: 75px;
	color: var(--color-blue);
}

.contact-card h3 {
	color: var(--color-heading);
	font-size: 35px;
	line-height: 1.4;
}

.contact-card a {
	text-decoration: none;
}

.contact-card .link-inline {
	text-decoration: underline;
}

/* Taller lines so each email address is an easy target for a finger. */
.contact-card__links {
	line-height: 24px;
}

.contact-card a:hover,
.contact-card a:focus-visible {
	text-decoration: underline;
}

.map {
	display: block;
	width: 760px;
	max-width: calc(100% - 20px);
	height: 300px;
	margin-left: 20px;
	border: 0;
}

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

.site-footer__contact {
	padding: 54px 0 41px;
	background: var(--color-blue);
	color: var(--color-white);
}

.site-footer__title {
	font-size: 30px;
	line-height: 1.4;
	text-align: center;
}

.site-footer__title a {
	color: var(--color-white);
}

.site-footer__columns {
	display: grid;
	grid-template-columns: 492fr 384fr 284fr;
	max-width: 1200px;
	margin: 38px auto 0;
	padding-inline: 20px;
}

.footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 21px;
	line-height: 20.3px;
}

.footer-contact--phones li {
	margin-bottom: 19px;
}

.footer-contact a,
.footer-contact span {
	color: var(--color-white);
}

.footer-contact .icon {
	width: 22px;
	height: 22px;
	margin-top: -2px;
}

.footer-contact--phones .icon {
	width: 20px;
	height: 20px;
	margin-top: -1px;
}

.footer-contact--address .icon {
	width: 24px;
	height: 24px;
}

.site-footer__logos {
	padding: 45px 20px;
	background: var(--color-rule);
}

.logo-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 50px;
}

.logo-strip a {
	display: grid;
	place-items: center;
	width: 120px;
	height: 100px;
}

.logo-strip a.logo-strip__square {
	width: 112px;
}

.logo-strip a.logo-strip__wide {
	width: 170px;
}

.logo-strip img {
	max-height: 100px;
}

.site-footer__bottom {
	padding: 10px 0 2px;
	border-top: 1px solid var(--color-bottom-line);
	background: var(--color-blue);
	color: var(--color-white);
	font-size: 13px;
	line-height: 18.85px;
}

.site-footer__bottom p {
	min-height: 29px;
}

/* ---------- Page not found ---------- */

.not-found {
	padding-bottom: 200px;
}

.not-found__text {
	margin: 20px 0 30px;
}

/* ---------- Page specific measurements (taken from each old page at 1440 wide) ----------
 * --intro-text and --intro-photo: widths of the text and the framed picture.
 * --intro-pad: space above the page title. --photo-offset: where the picture
 * starts compared with the title. --photo-h: picture height.
 */

.page--construction { --intro-text: 620fr; --intro-photo: 660fr; --photo-h: 404px; }
.page--welding-fabrication { --intro-text: 830fr; --intro-photo: 450fr; --intro-pad: 92px; --photo-offset: -22px; --photo-h: 400px; }
.page--scaffold { --intro-text: 796fr; --intro-photo: 484fr; --intro-pad: 90px; --photo-offset: 0px; --photo-h: 400px; }
.page--industrial-insulating { --intro-text: 844fr; --intro-photo: 436fr; --intro-pad: 88px; --photo-offset: -18px; --photo-h: 350px; }
.page--facilities { --intro-text: 774fr; --intro-photo: 506fr; --photo-h: 404px; }
.page--fleet-equipment { --intro-text: 676fr; --intro-photo: 604fr; --photo-h: 404px; }
.page--safety-services { --intro-text: 697fr; --intro-photo: 583fr; --intro-pad: 97px; --photo-offset: 3px; --photo-h: 350px; }
.page--commercial-services { --intro-text: 744fr; --intro-photo: 536fr; --photo-h: 404px; }
.page--industrial-services { --intro-text: 778fr; --intro-photo: 502fr; --intro-pad: 97px; --photo-offset: 3px; --photo-h: 350px; }
.page--corporate-safety { --intro-text: 655fr; --intro-photo: 625fr; --photo-h: 496px; }
.page--quality-control { --intro-text: 691fr; --intro-photo: 589fr; --photo-h: 429px; }
.page--maintenance { --intro-pad: 100px; }

.services__columns--maintenance { grid-template-columns: 427fr 341fr 512fr; }
.services__columns--welding { grid-template-columns: 427fr 506fr 347fr; }
.services__columns--scaffold { grid-template-columns: 487fr 385fr 408fr; }
.services__columns--insulating { grid-template-columns: 282fr 295fr 704fr; }

.services__photo-row {
	display: grid;
	grid-template-columns: 354fr 340fr;
	align-items: start;
	column-gap: 10px;
	padding-top: 10px;
}

.services__photo-row img {
	width: 100%;
}
.services__columns--facilities { grid-template-columns: 520fr 445fr 315fr; }
.services__columns--fleet { grid-template-columns: 440fr 413fr 427fr; }
.services__columns--commercial { grid-template-columns: 310fr 322fr 312fr 296fr; }
.services__columns--industrial { grid-template-columns: 21.76% 34.12% 36.18%; }
.services__columns--quality { grid-template-columns: 408fr 416fr 456fr; }

.services__columns--scaffold > :nth-child(n + 2),
.services__columns--welding > :nth-child(2) {
	padding-top: 5px;
}

.services__columns--maintenance > :nth-child(2) {
	padding-top: 20px;
}

/* The old pages left a little extra space above some quote buttons. */
.page--construction .services__actions,
.page--fleet-equipment .services__actions,
.page--maintenance .services__actions {
	padding-top: 20px;
}

.page--welding-fabrication .services__actions {
	padding-top: 30px;
}

.page--facilities .services__actions {
	padding-top: 10px;
}

.maintenance-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 867fr) minmax(0, 453fr);
	column-gap: 20px;
	padding-bottom: 1px;
}

.maintenance-photo {
	height: 443px;
	margin: -20px -20px 0 0;
	border: 0;
}

.corporate-intro__lists {
	display: grid;
	grid-template-columns: 391fr 224fr;
	column-gap: var(--gutter);
	padding-top: 50px;
}

.page--corporate-safety .intro {
	padding-bottom: 30px;
}

.page--corporate-safety .services {
	padding-top: 0;
}

.page--corporate-safety .services > .container > .rule {
	margin-top: 0;
}

.corporate-more {
	display: grid;
	grid-template-columns: 355fr 498fr 427fr;
	column-gap: var(--gutter);
	padding-top: 20px;
}

.corporate-more__photo {
	height: 352px;
	border: 0;
}

/* ---------- 1280px to 1439px: full header, email shown as an icon ---------- */

/* Beside the white corner the top bar needs about 1420px for the phone number
   and the email written out, or the email runs under the Twitter and Facebook
   icons. Narrower than that (a 1366 or 1280 laptop) the email shows as an icon,
   as on tablets, and the phone number stays written out. 1439px leaves room
   for a scroll bar. */
@media (min-width: 1280px) and (max-width: 1439px) {
	.site-header__bar-inner {
		grid-template-columns: auto auto minmax(0, 1fr) auto;
		column-gap: 30px;
	}

	.site-header__contact--email {
		gap: 0;
	}

	.site-header__contact--email .site-header__contact-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.site-header__contact--email .icon {
		width: 23px;
		height: 30px;
	}
}

/* ---------- 1279px and narrower: short header, menu behind a button ---------- */

/* Below about 1270px the menu runs under the white corner, so tablets
   (an iPad held sideways included) get the short header. */

@media (max-width: 1279px) {
	.site-header {
		position: relative;
	}

	.site-header__notch {
		display: none;
	}

	.site-header__logo {
		top: 25px;
		left: 30px;
		width: 120px;
		margin-top: 65px;
	}

	.site-header__bar-inner {
		display: flex;
		gap: 30px;
		margin-left: 0;
		padding: 0 34px 0 30px;
	}

	.site-header__quote {
		width: 200px;
		margin-right: auto;
	}

	.site-header__contact {
		gap: 0;
	}

	.site-header__contact-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.site-header__contact .icon {
		width: 23px;
		height: 30px;
	}

	.social {
		gap: 14px;
	}

	.site-header__band {
		height: 166px;
	}

	.site-header__menu-button {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		margin-right: -4px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.hamburger,
	.hamburger::before,
	.hamburger::after {
		display: block;
		width: 30px;
		height: 3px;
		border-radius: 1px;
		background: var(--color-white);
	}

	.hamburger {
		position: relative;
	}

	.hamburger::before,
	.hamburger::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.hamburger::before {
		top: -9px;
	}

	.hamburger::after {
		top: 9px;
	}

	/* The menu slides in from the right. */
	.site-nav {
		position: fixed;
		inset: 0 0 0 auto;
		z-index: 50;
		width: 320px;
		max-width: 100%;
		padding: 20px 20px 40px;
		overflow-y: auto;
		background: var(--color-blue);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.3s, visibility 0s 0.3s;
	}

	.site-nav.is-open {
		transform: none;
		visibility: visible;
		transition: transform 0.3s;
	}

	.site-nav__close {
		display: block;
		width: 44px;
		height: 44px;
		margin: 0 0 160px -2px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--color-white);
		font-size: 34px;
		line-height: 1;
		cursor: pointer;
	}

	.site-nav__list {
		display: block;
	}

	.site-nav__link {
		padding: 10px 20px;
		line-height: 29px;
	}

	.site-nav__link::after {
		display: none;
	}

	.site-nav__item--parent > .site-nav__link {
		padding-right: 20px;
	}

	.site-nav__item--parent > .site-nav__link--button {
		width: 100%;
		text-align: left;
	}

	.site-nav__item--parent > .site-nav__link--button::before,
	.site-nav__toggle::before {
		right: 18px;
	}

	.site-nav__toggle {
		height: 49px;
		width: 56px;
	}

	.site-nav__sub {
		position: static;
		width: auto;
		background: none;
	}

	.site-nav__item--parent:hover > .site-nav__sub,
	.site-nav__item--parent:focus-within > .site-nav__sub {
		display: none;
	}

	.site-nav__item--parent.is-open > .site-nav__sub {
		display: block;
	}

	.site-nav__sub a {
		padding: 8px 20px 8px 36px;
		font-size: 16px;
	}

	.site-main {
		padding-top: 0;
	}

	.page-top-space {
		height: 0;
	}

	.hero {
		height: 550px;
	}

	.hero::after {
		display: none;
	}

	/* The header no longer sits over the picture here, so the picture
	   scrolls with the page and shows in full. */
	.hero__img {
		position: absolute;
		height: 100%;
	}
}

/* ---------- 768px and narrower: content stacks ---------- */

@media (max-width: 768px) {
	:root {
		--gutter: 20px;
	}

	.container {
		padding-inline: 20px;
	}

	.title {
		font-size: 75px;
		text-align: center;
	}

	.heading {
		text-align: center;
	}

	.lead {
		font-size: 20px;
		text-align: center;
	}

	.hero {
		height: 270px;
	}

	.hero:not(.hero--short) {
		--hero-position: 100% 0%;
	}

	.intro {
		padding: 40px 0 40px;
	}

	.intro__grid,
	.maintenance-intro__grid,
	.about-intro__grid,
	.about-history__grid,
	.careers__grid,
	.locations__grid,
	.corporate-more {
		grid-template-columns: minmax(0, 1fr);
	}

	.intro__photo {
		height: 350px;
		margin: 40px 0 0;
	}

	.services__photos {
		padding-top: 20px;
	}

	.services__wide-photo,
	.maintenance-photo,
	.corporate-more__photo {
		height: 300px;
		margin: 20px 0 0;
	}

	.home-heading {
		font-size: 50px;
	}

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

	.about-intro__photo,
	.careers__main .photo-blue,
	.careers__side .photo-blue {
		width: auto;
		margin-inline: auto;
	}

	.values {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
		text-align: center;
	}

	.values__icon {
		margin-inline: auto;
	}

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

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

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

	.offer__photo,
	.offer__grid--photo-right .offer__photo {
		grid-column: 1 / -1;
		order: -1;
		height: 340px;
		margin: 0 0 20px;
	}

	.offer__tags,
	.offer__intro {
		text-align: center;
	}

	.careers__side {
		text-align: center;
	}

	.site-footer__contact {
		padding: 40px 0 78px;
	}

	.site-footer__columns {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 40px;
		text-align: center;
	}

	.footer-contact li {
		flex-direction: column;
		align-items: center;
		gap: 22px;
		margin-bottom: 14px;
	}

	.footer-contact--phones li {
		margin-bottom: 28px;
	}

	.footer-contact + .footer-contact {
		margin-top: 15px;
	}

	.footer-contact + .footer-contact--address {
		margin-top: 0;
	}

	.footer-contact--address li {
		margin-bottom: 0;
	}

	.footer-contact .icon {
		margin-top: 0;
	}
}

/* ---------- 480px and narrower: phone ---------- */

@media (max-width: 480px) {
	.site-header {
		display: grid;
		grid-template-columns: 176px minmax(0, 1fr) auto auto;
		grid-template-rows: 118px 44px;
		grid-template-areas:
			"logo . quote menu"
			"phone phone social social";
		align-items: center;
		padding-bottom: 15px;
		background: var(--color-blue);
	}

	.site-header__bar,
	.site-header__bar-inner,
	.site-header__band {
		display: contents;
	}

	.site-header__logo {
		position: static;
		grid-area: logo;
		align-self: start;
		width: 176px;
		margin: 1px 0 0;
	}

	.site-header__quote {
		grid-area: quote;
		align-self: start;
		width: 112px;
		margin: 26px 12px 0 0;
		padding: 6px 10px;
		white-space: normal;
	}

	.site-header__menu-button {
		grid-area: menu;
		align-self: start;
		margin: 21px 36px 0 0;
	}

	.site-header__contact--phone {
		grid-area: phone;
		gap: 20px;
		padding-left: 20px;
		color: #f3f3f3;
	}

	.site-header__contact--phone .site-header__contact-text {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
	}

	.site-header__contact--phone .icon--phone {
		display: none;
	}

	.site-header__contact--phone .icon--phone-alt {
		display: inline-block;
		width: 25px;
		height: 25px;
	}

	.site-header__contact--email {
		grid-area: social;
		justify-self: end;
		margin-right: 93px;
	}

	.site-header__social {
		grid-area: social;
		justify-self: end;
		padding-right: 19px;
	}

	.title {
		font-size: 51px;
	}

	.heading {
		font-size: 40px;
	}

	.heading--small,
	.subheading {
		font-size: 35px;
	}

	.hero {
		height: 221px;
	}

	.intro {
		padding: 24px 0 30px;
	}

	.intro__photo {
		height: 300px;
		margin-top: 30px;
	}

	.lead {
		text-align: left;
	}

	.page-heading {
		padding-top: 24px;
	}

	.home-heading {
		padding-top: 60px;
		font-size: 40px;
	}

	.tiles {
		grid-template-columns: minmax(0, 1fr);
		margin-inline: 0;
		padding-top: 40px;
	}

	.services__columns,
	.corporate-intro__lists,
	.community__lists,
	.offer__grid,
	.offer__grid--photo-right {
		grid-template-columns: minmax(0, 1fr);
	}

	.services__columns > * {
		padding-top: 0 !important;
	}

	.services__actions {
		padding-top: 20px !important;
		text-align: center;
	}

	.page--maintenance .services__actions {
		text-align: left;
	}

	.services__email {
		padding-top: 0;
		text-align: center;
	}

	.services__wide-photo {
		height: 200px;
		margin: 30px 0 0;
	}

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

	.site-footer__title {
		padding-inline: 10px;
	}

	/* Phone layout of each page, measured from the old site at 390 wide. */

	/* The old phone header covered the top of each hero picture, so the
	   picture box starts above the visible part to keep the same crop. */
	.hero--big-notch {
		height: 221px;
		--hero-hidden: 39px;
	}

	.hero--right {
		height: 211px;
		--hero-hidden: 39px;
	}

	.hero--short {
		height: 174px;
		--hero-hidden: 76px;
	}

	.hero__img {
		top: calc(-1 * var(--hero-hidden, 0px));
		height: calc(100% + var(--hero-hidden, 0px));
	}

	.heading--phone-large {
		font-size: 45px;
	}

	/* About */
	.about-intro {
		padding: 60px 0 20px;
	}

	.about-intro .lead {
		text-align: center;
	}

	.about-intro__photo {
		margin-top: 20px;
	}

	.about-history {
		padding: 40px 0 70px;
	}

	.about-history__grid {
		padding: 40px 0 50px;
	}

	.about-history__grid > img {
		margin-top: 0;
	}

	.about-history__grid .heading {
		margin-top: 20px;
	}

	.values {
		row-gap: 49px;
		padding-top: 40px;
	}

	.values__item {
		padding-right: 0;
	}

	.values__item p {
		text-align: left;
	}

	.values__icon {
		margin-bottom: 15px;
	}

	.community {
		padding-top: 60px;
	}

	.community .heading {
		text-align: left;
	}

	.community .text {
		padding-bottom: 29px;
	}

	/* Services overview */
	.services-top {
		padding: 60px 0 50px;
	}

	.services-top .lead {
		text-align: center;
	}

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

	.offer {
		padding-top: 41px;
	}

	.offer--construction {
		padding-top: 60px;
	}

	.offer__grid,
	.offer__grid--photo-right {
		margin-top: 31px;
	}

	.offer__photo,
	.offer__grid--photo-right .offer__photo {
		height: 300px;
		margin: 0 0 20px;
	}

	.offer__grid .arrow-list {
		margin-top: 20px;
	}

	.offer__grid .arrow-list + .arrow-list {
		margin-top: 0;
	}

	.offer__rule {
		margin-top: 40px;
	}

	/* Careers */
	.careers {
		padding: 51px 0 40px;
	}

	.careers__intro {
		margin-bottom: 41px;
		text-align: center;
	}

	.careers__intro .heading {
		margin-bottom: 10px;
	}

	.careers__main .heading {
		margin: 20px 0 0;
		text-align: left;
	}

	.careers__main .careers__positions {
		margin: 21px 0 0;
	}

	.careers__side {
		margin-top: 13px;
	}

	.services__photo-row {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		row-gap: 25px;
		padding: 46px 0 25px;
	}

	.services__photo-row img {
		width: 300px;
	}

	/* Locations */
	.locations {
		padding-top: 40px;
	}

	.contact-card {
		padding: 20px 0;
	}

	.contact-card + .contact-card {
		padding-top: 20px;
	}

	.map {
		width: 100%;
		max-width: none;
		height: 263px;
		margin: 41px 0 0;
	}

	/* The logos sit in one row that can be swiped sideways, close to the
	   old sliding logo strip. */
	.site-footer__logos {
		padding-inline: 0;
	}

	.logo-strip {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 40px;
		padding: 0 50px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.logo-strip li {
		flex: none;
		scroll-snap-align: center;
	}

	.logo-strip a.logo-strip__wide {
		width: 120px;
	}

	.logo-strip a.logo-strip__square {
		width: 100px;
	}
}

/* ---------- 379px and narrower: small phones ---------- */

/* The phone header needs 380px at full size. Below that the logo gives up
   the difference and the menu button sits closer to the edge. */
@media (max-width: 379px) {
	.site-header {
		grid-template-columns: minmax(0, 176px) minmax(0, 1fr) auto auto;
	}

	.site-header__logo {
		width: 100%;
	}

	.site-header__menu-button {
		margin-right: 16px;
	}
}

/* ---------- Motion and print ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
	}
}

@media print {
	.site-header__bar,
	.site-header__band,
	.site-header__notch,
	.site-footer__logos {
		display: none;
	}

	.site-header {
		position: static;
	}

	.site-main {
		padding-top: 0;
	}
}