/*
Theme Name: Security Locknut
Theme URI: https://www.securitylocknut.com
Description: Custom child theme for Security Locknut, built on BlankSlate. Hand-coded classic theme — no build step. Brand-matched, with content driven by Secure Custom Fields.
Author: Innovaxis
Template: blankslate
Version: 1.6.0
*/

/* ============================================================
   1. Brand tokens (extracted from securitylocknut.com)
   ============================================================ */
:root {
	--sln-navy: #002439;
	--sln-navy-700: #0a2f4a;
	--sln-red: #d0202e;
	--sln-red-600: #b21b27;
	--sln-steel: #c5c8ca;
	--sln-ink: #313233;
	--sln-paper: #f6fafd;
	--sln-white: #fff;
	--sln-font-body: Arial, Helvetica, "Helvetica Neue", system-ui, sans-serif;
	--sln-font-head: Arial, Helvetica, "Helvetica Neue", system-ui, sans-serif;
	--color-bg: var(--sln-white);
	--color-bg-alt: var(--sln-paper);
	--color-surface-dark: var(--sln-navy);
	--color-text: var(--sln-ink);
	--color-text-invert: var(--sln-white);
	--color-heading: var(--sln-navy);
	--color-primary: var(--sln-red);
	--color-primary-hover: var(--sln-red-600);
	--color-rule: var(--sln-steel);
}

/* ============================================================
   2. Base
   ============================================================ */
*, *::before, *::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--sln-font-body);
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--sln-red);
}

h1, h2, h3 {
	font-family: var(--sln-font-head);
	color: var(--color-heading);
	text-transform: uppercase;
	line-height: 1.05;
	margin: 0 0 .5em;
}

.container {
	width: 100%;
	max-width: 75rem;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.section {
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

.section--intro {
	text-align: center;
}

.section--pillars, .section--stats, .section--products, .section--industries, .section--compare {
	background: var(--color-bg-alt);
}

.section--approach, .section--support {
	background: var(--color-surface-dark);
	color: var(--color-text-invert);
}

.section--approach h2, .section--support h2 {
	color: var(--color-text-invert);
}

/* ============================================================
   3. Header / nav / footer
   ============================================================ */
.site-header {
	border-bottom: 1px solid var(--color-rule);
	background: var(--sln-white);
}

.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1.5rem;
	padding-block: 1rem;
}

.site-brand {
	justify-self: start;
}

.site-nav {
	justify-self: center;
}

.site-brand {
	text-decoration: none;
}

.site-brand__text {
	font-family: var(--sln-font-head);
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: .02em;
	color: var(--sln-red);
}

.site-brand__text strong {
	color: var(--sln-navy);
}

.site-nav__menu {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
}

.site-nav__cta .btn {
	color: var(--sln-white);
	padding: .5rem 1.15rem;
	font-size: .85rem;
}

.site-nav__cta .btn:hover {
	color: var(--sln-white);
}

.site-nav__menu a {
	color: var(--sln-navy);
	text-decoration: none;
	font-weight: 700;
	text-transform: uppercase;
	font-size: .9rem;
}

.site-nav__menu a:hover {
	color: var(--sln-red);
}

/* Header nav dropdown */
.site-nav__item {
	position: relative;
}

.site-nav__sub {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 13rem;
	list-style: none;
	margin: 0;
	padding: .5rem 0;
	background: var(--sln-white);
	border: 1px solid var(--color-rule);
	box-shadow: 0 10px 28px rgba(0, 36, 57, .12);
	z-index: 60;
}

.site-nav__item.has-sub:hover .site-nav__sub, .site-nav__item.has-sub:focus-within .site-nav__sub {
	display: block;
}

.site-nav__sub li {
	margin: 0;
}

.site-nav__sub a {
	display: block;
	padding: .45rem 1.1rem;
	white-space: nowrap;
	font-size: .85rem;
}

/* Footer */
.site-footer {
	background: var(--sln-navy);
	color: var(--sln-white);
	padding-block: 2.5rem;
	font-size: .9rem;
}

.site-footer a {
	color: var(--sln-white);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--sln-red);
}

.site-footer__top {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 2.5rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid rgba(255, 255, 255, .15);
	text-align: left;
}

.site-footer__heading {
	display: block;
	font-family: var(--sln-font-head);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: .9rem;
	margin-bottom: .9rem;
	color: var(--sln-white);
}

.site-brand__text--footer {
	display: inline-block;
	margin-bottom: .5rem;
	color: var(--sln-white);
}

.site-brand__text--footer strong {
	color: var(--sln-red);
}

.site-footer__address {
	font-style: normal;
	line-height: 1.8;
	margin: 0 0 .9rem;
}

.site-footer__badge {
	display: inline-block;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 2px;
	padding: .25rem .7rem;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.site-footer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__nav > ul > li {
	margin-bottom: .5rem;
}

.site-footer__nav > ul > li > a {
	font-weight: 700;
}

.site-footer__subnav {
	margin: .4rem 0 .6rem .9rem !important;
}

.site-footer__subnav li {
	margin-bottom: .35rem;
}

.site-footer__subnav a {
	font-size: .85rem;
	opacity: .9;
}

.site-footer__social-list {
	list-style: none;
	display: flex;
	gap: .9rem;
	margin: 0;
	padding: 0;
}

.site-footer__social-list a {
	display: inline-flex;
}

.site-footer__social-list svg {
	width: 22px;
	height: 22px;
}

.site-footer__bottom {
	padding-top: 1.5rem;
	text-align: center;
}

/* ============================================================
   4. Ribbon + buttons
   ============================================================ */
.ribbon {
	background: var(--sln-navy);
	color: var(--sln-white);
	text-align: center;
	font-weight: 700;
	letter-spacing: .02em;
	padding: .6rem 1rem;
	font-size: .95rem;
}

.ribbon a {
	color: var(--sln-white);
	text-decoration: underline;
}

.ribbon a:hover {
	color: var(--sln-red);
}

.btn {
	display: inline-block;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: .85rem 1.6rem;
	border-radius: 2px;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.btn--primary {
	background: var(--color-primary);
	color: var(--sln-white);
}

.btn--primary:hover {
	background: var(--color-primary-hover);
}

.btn--ghost {
	background: transparent;
	color: var(--sln-white);
	box-shadow: inset 0 0 0 2px var(--sln-white);
}

.btn--ghost:hover {
	background: var(--sln-white);
	color: var(--sln-navy);
}

.btn--outline {
	background: transparent;
	color: var(--sln-navy);
	box-shadow: inset 0 0 0 2px var(--sln-navy);
}

.btn--outline:hover {
	background: var(--sln-navy);
	color: var(--sln-white);
}

/* ============================================================
   5. Hero rotator
   ============================================================ */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--sln-navy);
}

.hero__viewport {
	overflow: hidden;
}

.hero__track {
	display: flex;
	transition: transform .6s ease;
}

.hero__slide {
	position: relative;
	flex: 0 0 100%;
	min-width: 0;
	min-height: clamp(28rem, 60vh, 44rem);
	display: grid;
}

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

.hero__overlay {
	position: relative;
	display: flex;
	align-items: center;
	padding: clamp(1.5rem, 5vw, 4rem);
	background: linear-gradient(90deg, rgba(0, 36, 57, .85) 0%, rgba(0, 36, 57, .5) 55%, rgba(0, 36, 57, 0) 100%);
}

.hero__content {
	max-width: 44rem;
	color: #fff;
	margin-left: clamp(.5rem, 6vw, 5rem);
}

.hero__headline {
	font-size: clamp(1.9rem, 4vw, 3.25rem);
	font-weight: 800;
	margin: 0 0 .75rem;
	color: #fff;
	text-wrap: balance;
}

.hero__subheading {
	font-size: clamp(1.05rem, 1.6vw, 1.4rem);
	line-height: 1.4;
	margin: 0 0 1.75rem;
	max-width: 38rem;
}

.hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .9);
	color: var(--sln-navy);
	cursor: pointer;
	font-size: 1.1rem;
}

.hero__nav--prev {
	left: 1rem;
}

.hero__nav--next {
	right: 1rem;
}

.hero__nav:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.hero__dots {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: .5rem;
}

.hero__dot {
	width: .7rem;
	height: .7rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .5);
	cursor: pointer;
}

.hero__dot.is-active {
	background: #fff;
}

.hero__dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ============================================================
   6. Recent news grid
   ============================================================ */
.news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.news-card h3 {
	font-size: 1.05rem;
	text-transform: none;
}

.news-card a {
	text-decoration: none;
	color: inherit;
}

/* ============================================================
   7. Logo sizing + header layout
   ============================================================ */
.custom-logo {
	max-height: 56px;
	width: auto;
	display: block;
}

.custom-logo-link {
	display: inline-block;
	line-height: 0;
}

.site-header__inner {
	min-height: 88px;
}

/* ============================================================
   8. Section content
   ============================================================ */
.lead {
	font-size: 1.15rem;
	max-width: 46rem;
	margin-inline: auto;
}

.section--intro .lead {
	margin-inline: auto;
}

.section__intro {
	max-width: 46rem;
	margin: 0 auto 2rem;
	color: inherit;
}

.section__eyebrow {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 700;
	color: var(--sln-red);
	text-align: center;
	margin: 0 0 1.5rem;
}

.section h2 {
	text-align: center;
}

.section--approach, .section--support {
	text-align: center;
}

.link-arrow {
	display: inline-block;
	margin-top: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	font-size: .85rem;
	text-decoration: none;
	color: var(--sln-red);
}

.link-arrow:hover {
	color: var(--sln-red-600);
}

/* Hero statement — value prop band under the banners */
.section--herostatement {
	text-align: center;
}

.herostatement__headline {
	font-size: clamp(2rem, 5vw, 3.5rem);
	margin: 0 0 .4rem;
}

.herostatement__subhead {
	text-transform: none;
	font-weight: 700;
	color: var(--sln-navy);
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	margin: 0 0 1.25rem;
}

/* Three pillars */
.pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.5rem;
}

.pillar {
	background: #fff;
	border: 1px solid var(--color-rule);
	border-radius: 4px;
	padding: 1.75rem;
}

.pillar h3 {
	margin-top: 0;
}

/* Industry tiles */
.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1rem;
}

.tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	min-height: 9rem;
	background: var(--sln-navy);
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	text-align: center;
	padding: 1.25rem 1rem;
	transition: background-color .15s ease;
}

.tile span {
	font-family: var(--sln-font-head);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .02em;
	font-size: 1.1rem;
}

.tile:hover {
	background: var(--sln-red);
}

/* Logo strip (placeholder slots) */
.logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
}

.logo-slot {
	display: block;
	width: 8rem;
	height: 3rem;
	background: var(--sln-steel);
	opacity: .5;
	border-radius: 3px;
}

/* Logo rotator — continuous scrolling marquee */
.logo-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.logo-marquee__track {
	display: flex;
	align-items: center;
	gap: clamp(2.5rem, 6vw, 5rem);
	list-style: none;
	margin: 0;
	padding: 0;
	width: max-content;
	animation: sln-marquee 40s linear infinite;
}

.logo-marquee:hover .logo-marquee__track {
	animation-play-state: paused;
}

.logo-marquee__item {
	flex: 0 0 auto;
}

.logo-marquee__item img {
	height: clamp(2rem, 4vw, 3rem);
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .65;
	transition: filter .2s ease, opacity .2s ease;
}

.logo-marquee__item img:hover {
	filter: grayscale(0);
	opacity: 1;
}

@keyframes sln-marquee {
	from {
		transform: translateX(0);
	}
	
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.logo-marquee__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: auto;
	}
	
	.logo-marquee__item[aria-hidden="true"] {
		display: none;
	}
}

/* Compare + approach CTA rows */
.section--compare {
	text-align: center;
}

.cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin-top: 1.5rem;
}

/* Stats */
.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 1.5rem;
	text-align: center;
}

.stat {
	padding: 1rem;
}

.stat__value {
	display: block;
	font-family: var(--sln-font-head);
	font-weight: 800;
	font-size: clamp(2rem, 4vw, 3rem);
	color: var(--sln-red);
	line-height: 1;
}

.stat__label {
	display: block;
	margin-top: .5rem;
	font-size: .95rem;
	color: var(--color-text);
}

/* Pillar cards as links (labels only, per doc) */
.pillar--link {
	display: block;
	text-align: center;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease;
}

.pillar--link:hover {
	border-color: var(--sln-red);
}

.pillar--link h3 {
	margin: 0;
}

/* Placeholder notes (mark doc-deferred content without inventing copy) */
.placeholder-note {
	color: var(--sln-steel);
	font-style: italic;
	font-size: .9rem;
	margin: 1rem 0 0;
}

.placeholder-note--invert {
	color: rgba(255, 255, 255, .55);
}

/* Footer legal line (doc) */
.site-footer__copy {
	margin: 0 0 .35rem;
}

.site-footer__legal {
	margin: 0;
	font-size: .85rem;
}

.site-footer__legal a {
	color: var(--sln-white);
	text-decoration: none;
}

.site-footer__legal a:hover {
	color: var(--sln-red);
}

.site-footer__legal span {
	margin-inline: .4rem;
	opacity: .6;
}

/* Icons */
.pillar__icon {
	display: inline-flex;
	color: var(--sln-red);
	margin-bottom: .6rem;
}

.pillar__icon svg {
	width: 42px;
	height: 42px;
}

.tile__icon {
	display: inline-flex;
	color: #fff;
}

.tile__icon svg {
	width: 40px;
	height: 40px;
}

/* Testimonials rotator */
.section--testimonials {
	background: var(--color-bg-alt);
}

.tcarousel {
	position: relative;
	max-width: 52rem;
	margin-inline: auto;
}

.tcarousel__viewport {
	overflow: hidden;
}

.tcarousel__track {
	display: flex;
	transition: transform .6s ease;
}

.tcarousel__slide {
	flex: 0 0 100%;
	min-width: 0;
	margin: 0;
	padding: 0 clamp(1rem, 6vw, 4rem);
	text-align: center;
}

.tcarousel__quote {
	margin: 0 0 1.5rem;
	font-size: clamp(1.2rem, 2.2vw, 1.6rem);
	line-height: 1.45;
	color: var(--sln-navy);
	font-style: italic;
	text-wrap: balance;
}

.tcarousel__quote::before {
	content: "“";
}

.tcarousel__quote::after {
	content: "”";
}

.tcarousel__cite {
	display: block;
}

.tcarousel__name {
	display: block;
	font-family: var(--sln-font-head);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--sln-navy);
}

.tcarousel__role {
	display: block;
	margin-top: .15rem;
	font-size: .9rem;
	color: var(--sln-ink);
}

.tcarousel__nav {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--sln-navy);
	color: #fff;
	cursor: pointer;
	font-size: 1.05rem;
}

.tcarousel__nav--prev {
	left: -.5rem;
}

.tcarousel__nav--next {
	right: -.5rem;
}

.tcarousel__nav:hover {
	background: var(--sln-red);
}

.tcarousel__nav:focus-visible {
	outline: 3px solid var(--sln-navy);
	outline-offset: 2px;
}

.tcarousel__dots {
	display: flex;
	justify-content: center;
	gap: .5rem;
	margin-top: 1.75rem;
}

.tcarousel__dot {
	width: .7rem;
	height: .7rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--sln-steel);
	cursor: pointer;
}

.tcarousel__dot.is-active {
	background: var(--sln-red);
}

.tcarousel__dot:focus-visible {
	outline: 2px solid var(--sln-navy);
	outline-offset: 2px;
}

@media (max-width: 560px) {
	.tcarousel__nav--prev {
		left: 0;
	}
	
	.tcarousel__nav--next {
		right: 0;
	}
}

/* Placeholder news cards */
.news-card--placeholder h3 {
	color: var(--sln-steel);
}

.news-card--placeholder p {
	color: var(--sln-steel);
}

.news-card__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 16/9;
	background: var(--sln-steel);
	opacity: .4;
	border-radius: 3px;
	margin-bottom: .75rem;
}

/* Feature cards (Engineered to Stay Locked-On) */
.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1.5rem;
	margin-top: 2.5rem;
	text-align: left;
}

.feature-card {
	background: #fff;
	border: 1px solid var(--color-rule);
	border-radius: 4px;
	padding: 1.75rem;
}

.feature-card__icon {
	display: inline-flex;
	color: var(--sln-red);
	margin-bottom: .75rem;
}

.feature-card__icon svg {
	width: 38px;
	height: 38px;
}

.feature-card h3 {
	margin: 0 0 .5rem;
	font-size: 1.05rem;
}

.feature-card p {
	margin: 0;
	font-size: .95rem;
}

/* Media cards (Products / Supporting Services) */
.media-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1.5rem;
	margin-top: 2rem;
}

.media-card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border: 1px solid var(--color-rule);
	border-radius: 4px;
	overflow: hidden;
	transition: border-color .15s ease, transform .15s ease;
}

.media-card:hover {
	border-color: var(--sln-red);
	transform: translateY(-2px);
}

.media-card__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 4/3;
	background: linear-gradient(135deg, var(--sln-steel) 0%, var(--sln-paper) 100%);
}

.media-card h3 {
	margin: 0;
	padding: 1rem 1.1rem;
	font-size: 1rem;
	text-transform: none;
	color: var(--sln-navy);
}

/* Industry cards (Who We Serve) */
.industry-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.5rem;
	margin-top: 2rem;
	text-align: left;
}

.industry-card {
	background: #fff;
	border: 1px solid var(--color-rule);
	border-radius: 4px;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
}

.industry-card__icon {
	display: inline-flex;
	color: var(--sln-red);
	margin-bottom: .75rem;
}

.industry-card__icon svg {
	width: 40px;
	height: 40px;
}

.industry-card h3 {
	margin: 0 0 .5rem;
	font-size: 1.1rem;
}

.industry-card p {
	margin: 0 0 1rem;
	font-size: .95rem;
}

.industry-card .link-arrow {
	margin-top: auto;
}

/* Comparison (How Security Locknut Compares) */
.compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	max-width: 60rem;
	margin: 2rem auto 0;
	text-align: left;
}

.compare__col {
	background: #fff;
	border: 1px solid var(--color-rule);
	border-radius: 4px;
	padding: 1.5rem 1.75rem;
}

.compare__col--win {
	border-top: 4px solid var(--sln-red);
}

.compare__col--lose {
	border-top: 4px solid var(--sln-steel);
}

.compare__head {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	text-align: left;
}

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

.compare__col li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: .85rem;
	font-size: .95rem;
	line-height: 1.5;
}

.compare__mark {
	position: absolute;
	left: 0;
	top: .05rem;
	display: inline-grid;
	place-items: center;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 700;
}

.compare__mark--yes {
	background: var(--sln-red);
	color: #fff;
}

.compare__mark--no {
	background: var(--sln-steel);
	color: var(--sln-navy);
}

/* Approach steps */
.approach-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1.5rem;
	margin: 2.5rem 0;
	text-align: left;
}

.approach-card {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 4px;
	padding: 1.75rem;
}

.approach-card__num {
	display: inline-grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 999px;
	background: var(--sln-red);
	color: #fff;
	font-family: var(--sln-font-head);
	font-weight: 800;
	font-size: 1.1rem;
	margin-bottom: .85rem;
}

.approach-card h3 {
	margin: 0 0 .5rem;
	font-size: 1.05rem;
	color: #fff;
}

.approach-card p {
	margin: 0;
	font-size: .95rem;
	color: rgba(255, 255, 255, .85);
}

/* Engineering Support cards */
.support-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1.5rem;
	margin-top: 2.5rem;
	text-align: left;
}

.support-card {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 4px;
	padding: 1.75rem;
}

.support-card__icon {
	display: inline-flex;
	color: #fff;
	margin-bottom: .75rem;
}

.support-card__icon svg {
	width: 36px;
	height: 36px;
}

.support-card h3 {
	margin: 0 0 .5rem;
	font-size: 1.05rem;
	color: #fff;
}

.support-card p {
	margin: 0;
	font-size: .95rem;
	color: rgba(255, 255, 255, .85);
}

.section__intro--invert {
	color: rgba(255, 255, 255, .85);
}

/* Footer associations */
.site-footer__assoc {
	list-style: none;
	margin: .5rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1rem;
}

.site-footer__assoc li {
	font-size: .82rem;
	opacity: .85;
}

.site-footer__heading--assoc {
	margin-top: 1.4rem;
}

/* Primary nav — simple responsive wrap */
@media (max-width: 720px) {
	.compare {
		grid-template-columns: 1fr;
	}
	
	.site-header__inner {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: .75rem;
		text-align: center;
	}
	
	.site-brand {
		justify-self: center;
	}
	
	.site-nav__menu {
		gap: 1rem;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.site-footer__top {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
}

/* ============================================================
   9. v1.7.0 refinements (appended — later rules win the cascade)
   ============================================================ */

/* More perceptible alternate-section background */
:root {
	--color-bg-alt: #eaf0f6;
}

/* --- Sticky, full-width header; logo hard-left; menu centered --- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 200;
	box-shadow: 0 2px 12px rgba(0, 36, 57, .07);
}

.site-header__inner {
	max-width: none;
	grid-template-columns: 1fr auto 1fr;
	padding-inline: clamp(1rem, 3vw, 2.25rem);
	min-height: 84px;
}

.site-brand {
	justify-self: start;
}

.site-nav {
	justify-self: center;
}

.site-nav__menu {
	flex-wrap: nowrap;
}

.site-nav__cta {
	margin-left: .35rem;
}

.site-nav__cta .btn {
	white-space: nowrap;
}

/* --- Larger section headings + more space before the content --- */
.section h2 {
	font-size: clamp(1.9rem, 3.4vw, 2.7rem);
	margin-bottom: 1.5rem;
	letter-spacing: .01em;
}

.section--herostatement .herostatement__headline {
	font-size: clamp(2.2rem, 5vw, 3.6rem);
}

/* --- Kill widows; center the Who We Serve intro --- */
.section p, .section .lead {
	text-wrap: pretty;
}

.section__intro {
	text-align: center;
	text-wrap: balance;
	margin-left: auto;
	margin-right: auto;
}

/* --- Products + Supporting Services both get a clear background band --- */
.section--products, .section--services {
	background: var(--color-bg-alt);
}

.section--services {
	border-top: 1px solid rgba(0, 36, 57, .08);
}

.section--industries {
	background: var(--color-bg);
}

.media-card__thumb {
	background: linear-gradient(135deg, #dfe6ee 0%, #f3f6fa 100%);
}

/* --- Engineering Support: distinct feel vs. the Approach section above --- */
.section--support {
	background: linear-gradient(180deg, #0a3350 0%, #05263c 100%);
	border-top: 4px solid var(--sln-red);
}

.section--support .support-card {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .16);
}

/* --- By the Numbers: stats pop as tiles on a light band --- */
.section--stats {
	background: var(--color-bg-alt);
}

.section--stats .stat {
	background: #fff;
	border: 1px solid var(--color-rule);
	border-top: 3px solid var(--sln-red);
	border-radius: 8px;
	padding: 1.75rem 1rem;
	box-shadow: 0 12px 28px rgba(0, 36, 57, .09);
}

/* --- Footer: white logo, distinct headings, two-column Popular Links --- */
.site-footer__top {
	grid-template-columns: 1.4fr 1.5fr 1fr;
}

.site-footer__logo {
	max-height: 46px;
	width: auto;
	filter: brightness(0) invert(1);
}

.site-footer__brandlink {
	display: inline-block;
	line-height: 0;
	margin-bottom: .9rem;
}

.site-footer__heading {
	font-size: 1.05rem;
	letter-spacing: .06em;
	color: #fff;
	position: relative;
	padding-bottom: .55rem;
	margin-bottom: 1rem;
}

.site-footer__heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2rem;
	height: 2px;
	background: var(--sln-red);
}

.site-footer__nav > ul {
	columns: 2;
	column-gap: 1.5rem;
}

.site-footer__nav > ul > li {
	margin-bottom: .5rem;
	break-inside: avoid;
}

/* Safety net: never show dev placeholder notes on the live page */
.placeholder-note {
	display: none !important;
}

@media (max-width: 720px) {
	.site-footer__top {
		grid-template-columns: 1fr;
	}
	
	.site-footer__nav > ul {
		columns: 1;
	}
	
	.site-nav__menu {
		flex-wrap: wrap;
	}
}

/* Footer wordmark rendered as an all-white "logo" (Media Library logo has a
   solid background, so a CSS-whitened image would fill as a block). */
.site-brand__text--footer {
	font-size: 1.7rem;
	margin-bottom: .9rem;
	color: #fff;
}

.site-brand__text--footer strong {
	color: #fff;
}

.site-footer__brandlink {
	text-decoration: none;
}

/* ============================================================
   10. v1.7.2 — logo rotator (real logos) + hero-statement motif
   ============================================================ */

/* Grey band so both white and dark brand logos read; full colour, smooth loop */
.section--logos {
	background: #9499a0;
	padding-block: clamp(2rem, 4vw, 3rem);
}

.section--logos .logo-marquee__item img {
	filter: none;
	opacity: 1;
	height: clamp(2.2rem, 4.5vw, 3.4rem);
}

.logo-marquee__track {
	gap: clamp(2.5rem, 6vw, 5.5rem);
	animation-duration: 55s;
}

/* FLS + Eagle are JPEGs with white boxes — multiply drops the white into the grey */
.logo-marquee__item--mult img {
	mix-blend-mode: multiply;
}

/* Subtle light background motif behind the Prevailing Torque statement (Medinsight-style) */
.section--herostatement {
	position: relative;
	overflow: hidden;
}

.section--herostatement::before, .section--herostatement::after {
	content: "";
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	pointer-events: none;
}

.section--herostatement::before {
	width: 40rem;
	height: 40rem;
	top: -16rem;
	right: -14rem;
	background: radial-gradient(circle, rgba(0, 36, 57, .05) 0%, rgba(0, 36, 57, 0) 70%);
}

.section--herostatement::after {
	width: 32rem;
	height: 32rem;
	bottom: -18rem;
	left: -12rem;
	background: radial-gradient(circle, rgba(0, 36, 57, .045) 0%, rgba(0, 36, 57, 0) 70%);
}

.section--herostatement > .container {
	position: relative;
	z-index: 1;
}

/* v1.7.3 — larger logos + slightly lighter rotator band */
.section--logos {
	background: #a9aeb4;
}

.section--logos .logo-marquee__item img {
	height: clamp(2.8rem, 5.5vw, 4.2rem);
}

/* v1.7.4 — brand-red in-text links + wider lead paragraphs */
.lead--wide {
	max-width: 62rem;
}

.section p a, .section .lead a, .section__intro a, .lead a, .herostatement__subhead a {
	color: var(--sln-red);
	text-decoration: underline;
	text-underline-offset: .14em;
	text-decoration-thickness: .08em;
	transition: color .15s ease;
}

.section p a:hover, .section .lead a:hover, .section__intro a:hover, .lead a:hover, .herostatement__subhead a:hover {
	color: var(--sln-red-600);
}

/* v1.7.5 — uniform wider width for all lead + intro paragraphs */
.lead, .section__intro {
	max-width: 62rem;
}

/* v1.7.6 — By the Numbers: no boxes, bigger figures, red larger labels; single-column footer links */
.section--stats .stat {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 1rem .5rem;
}

.section--stats .stat__value {
	font-size: clamp(2.8rem, 6vw, 4.5rem);
}

.section--stats .stat__label {
	color: var(--sln-red);
	font-size: 1.1rem;
	font-weight: 700;
	margin-top: .6rem;
}

.site-footer__nav > ul {
	columns: 1;
}

/* v1.7.7 — space the stats out more; labels back to brand navy (red was too much) */
.section--stats .stats {
	gap: clamp(2rem, 4vw, 3.75rem);
}

.section--stats .stat__label {
	color: var(--sln-navy);
}

/* v1.7.8 — larger banner (hero) text; enforce a 14px (0.875rem) minimum font size */
.hero__headline {
	font-size: clamp(2.2rem, 4.7vw, 3.9rem);
}

.hero__subheading {
	font-size: clamp(1.15rem, 1.9vw, 1.6rem);
}

.site-nav__cta .btn, .site-nav__sub a, .site-footer__subnav a, .site-footer__legal, .site-footer__assoc li, .link-arrow, .site-footer__badge, .compare__mark {
	font-size: .875rem;
}

/* v1.7.9 — keep the 5 stats on one line, fluidly scaling with the viewport */
.section--stats .stats {
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(.5rem, 2vw, 3.5rem);
}

.section--stats .stat {
	padding: 1rem .25rem;
}

.section--stats .stat__value {
	font-size: clamp(1.3rem, 5vw, 4.2rem);
}

.section--stats .stat__label {
	font-size: clamp(.875rem, 2.4vw, 1.1rem);
}

/* ============================================================
   11. v1.7.10 — new header logo (bigger), gradient band, nut motifs
   ============================================================ */

/* --- Header: new SL logo, a bit bigger --- */
.site-header__inner {
	min-height: 90px;
}

.site-brand .custom-logo {
	max-height: 68px;
	width: auto;
}

/* --- Continuous dark-blue -> light-blue gradient: Approach -> Support -> By the Numbers --- */
.gradient-band {
	background: linear-gradient(180deg, #002439 0%, #073a58 34%, #0c4a70 54%, #17587f 62%, #dfeaf3 70%, #eaf0f6 100%);
}

.gradient-band .section--approach, .gradient-band .section--support, .gradient-band .section--stats {
	background: transparent;
}

.gradient-band .section--support {
	border-top: 0;
}

/* --- Faded nut motifs behind the Prevailing Torque + Engineered-to-Stay sections --- */
.section--intro, .section--herostatement {
	position: relative;
	overflow: hidden;
}

.section--intro > .container, .section--herostatement > .container {
	position: relative;
	z-index: 1;
}

.section--herostatement::before, .section--herostatement::after {
	content: none;
}

.section--herostatement {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23002439%27%20stroke-opacity%3D%270.06%27%20stroke-width%3D%277%27%3E%3Cpolygon%20points%3D%2795%2C50%2072.5%2C88.97%2027.5%2C88.97%205%2C50%2027.5%2C11.03%2072.5%2C11.03%27%2F%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%2750%27%20r%3D%2723%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23002439%27%20stroke-opacity%3D%270.06%27%20stroke-width%3D%277%27%3E%3Cpolygon%20points%3D%2795%2C50%2072.5%2C88.97%2027.5%2C88.97%205%2C50%2027.5%2C11.03%2072.5%2C11.03%27%2F%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%2750%27%20r%3D%2723%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: -42px -48px, right 60px top 60px;
	background-size: 196px, 250px;
}

.section--herostatement.nitro-lazy {
	background-image: none !important;
}

.section--intro {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23002439%27%20stroke-opacity%3D%270.06%27%20stroke-width%3D%277%27%3E%3Cpolygon%20points%3D%2795%2C50%2072.5%2C88.97%2027.5%2C88.97%205%2C50%2027.5%2C11.03%2072.5%2C11.03%27%2F%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%2750%27%20r%3D%2723%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23002439%27%20stroke-opacity%3D%270.06%27%20stroke-width%3D%277%27%3E%3Cpolygon%20points%3D%2795%2C50%2072.5%2C88.97%2027.5%2C88.97%205%2C50%2027.5%2C11.03%2072.5%2C11.03%27%2F%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%2750%27%20r%3D%2723%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23002439%27%20stroke-opacity%3D%270.06%27%20stroke-width%3D%277%27%3E%3Cpolygon%20points%3D%2795%2C50%2072.5%2C88.97%2027.5%2C88.97%205%2C50%2027.5%2C11.03%2072.5%2C11.03%27%2F%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%2750%27%20r%3D%2723%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: 60px 60px, right -42px bottom -48px, 0 0;
	background-size: 250px, 196px, 0;
}

.section--intro.nitro-lazy {
	background-image: none !important;
}

/* =============================================================
   12. v1.7.12 — gradient readability fix + card hover lift
   ============================================================= */

/* Keep "The Security Locknut Approach" and "Engineering Support" genuinely
   dark so their white card text stays fully readable, then run the dark ->
   light hand-off entirely inside the TOP PADDING of "By the Numbers" — an
   empty band with no text behind it, so light can never wash out a card no
   matter the viewport width. Approach (navy) -> Support (deep blue) ->
   the transition band -> the light paper the stats sit on. */
.gradient-band {
	background: none;
}

.gradient-band .section--approach {
	background: linear-gradient(180deg, #002439 0%, #06375a 100%);
}

.gradient-band .section--support {
	background: linear-gradient(180deg, #06375a 0%, #0a4a70 100%);
	border-top: 0;
}

/* Extra top padding on the stats section is the transition zone: it starts on
   the same deep blue the support section ends on and fades to light paper
   before the "By the Numbers" heading, which then sits fully on light. */
.gradient-band .section--stats {
	padding-top: 205px;
	background: linear-gradient(180deg, #0a4a70 0, #2f6a90 46px, #9fbfd8 118px, #eaf0f6 165px);
}

@media (max-width: 720px) {
	.gradient-band .section--stats {
		padding-top: 160px;
	}
}

/* --- Tasteful card hover: lift + soft shadow --- */
.feature-card, .media-card, .industry-card, .news-card, .compare__col, .approach-card, .support-card {
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	will-change: transform;
}

.feature-card:hover, .industry-card:hover, .news-card:hover, .media-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(0, 36, 57, .14);
	border-color: var(--sln-red);
}

.compare__col:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(0, 36, 57, .12);
}

.approach-card:hover, .support-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 36px rgba(0, 0, 0, .3);
	border-color: rgba(255, 255, 255, .32);
}

/* =============================================================
   13. v1.7.20 — mobile hamburger menu
   ============================================================= */
.nav-toggle {
	display: none;
}

@media (max-width: 720px) {
	/* Header becomes: logo (left) + hamburger (right); nav collapses out of flow */
	.site-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		grid-template-columns: none;
		text-align: left;
		gap: 1rem;
	}
	
	.site-brand {
		justify-self: auto;
	}
	
	.nav-toggle {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 9px;
		margin: 0 0 0 auto;
		border: 0;
		background: transparent;
		cursor: pointer;
		flex: 0 0 auto;
	}
	
	.nav-toggle__bar {
		display: block;
		width: 100%;
		height: 3px;
		background: var(--sln-navy);
		border-radius: 2px;
		transition: transform .25s ease, opacity .2s ease;
	}
	
	.site-header.nav-open .nav-toggle__bar:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}
	
	.site-header.nav-open .nav-toggle__bar:nth-child(2) {
		opacity: 0;
	}
	
	.site-header.nav-open .nav-toggle__bar:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}
	
	/* Menu drops down as a full-width panel below the header */
	.site-nav {
		position: static;
	}
	
	.site-nav__menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		flex-wrap: nowrap;
		gap: 0;
		margin: 0;
		padding: 0;
		background: var(--sln-white);
		border-top: 1px solid var(--color-rule);
		box-shadow: 0 18px 30px rgba(0, 36, 57, .16);
		max-height: 0;
		overflow: hidden;
		visibility: hidden;
		transition: max-height .32s ease, visibility .32s;
	}
	
	.site-header.nav-open .site-nav__menu {
		max-height: 82vh;
		overflow-y: auto;
		visibility: visible;
	}
	
	.site-nav__item {
		position: static;
		width: 100%;
	}
	
	.site-nav__menu a {
		display: block;
		padding: .9rem clamp(1.15rem, 5vw, 2rem);
		font-size: 1rem;
		border-bottom: 1px solid rgba(0, 36, 57, .07);
	}
	
	/* Sub-menu (e.g. Industries) shows indented instead of on hover */
	.site-nav__sub {
		position: static;
		display: block;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
		box-shadow: none;
		background: rgba(0, 36, 57, .03);
	}
	
	.site-nav__sub a {
		padding-left: clamp(2.2rem, 9vw, 3rem);
		font-size: .92rem;
		text-transform: none;
		font-weight: 600;
		color: var(--color-text);
	}
	
	.site-nav__cta {
		padding: .8rem clamp(1.15rem, 5vw, 2rem);
	}
	
	.site-nav__cta .btn {
		display: block;
		width: 100%;
		text-align: center;
		padding: .7rem 1rem;
	}
}

/* =============================================================
   14. v1.7.22 — Blog: index/archives + single article
   ============================================================= */
.container--narrow {
	max-width: 48rem;
}

/* ---- Index / archives ---- */
.section--blog {
	background: var(--color-bg-alt);
}

.blog-head {
	text-align: center;
	max-width: 44rem;
	margin: 0 auto clamp(2rem, 5vw, 3.25rem);
}

.blog-head .section__eyebrow {
	margin-bottom: .75rem;
}

.blog-head h1 {
	font-size: clamp(1.9rem, 4vw, 2.85rem);
	line-height: 1.1;
	margin: 0;
	color: var(--sln-navy);
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

.blog-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--sln-white);
	border: 1px solid var(--color-rule);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 36, 57, .04);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.blog-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 38px rgba(0, 36, 57, .14);
	border-color: transparent;
}

.blog-card__media {
	display: block;
	position: relative;
	aspect-ratio: 16/10;
	overflow: hidden;
	background: var(--sln-navy);
}

.blog-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.blog-card:hover .blog-card__media img {
	transform: scale(1.05);
}

.blog-card__ph {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--sln-navy), var(--sln-navy-700));
}

.blog-card__ph::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .12), transparent 55%), radial-gradient(circle at 78% 74%, rgba(208, 32, 46, .28), transparent 50%);
}

.blog-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.35rem 1.4rem 1.5rem;
}

.blog-card__date {
	text-transform: uppercase;
	letter-spacing: .07em;
	font-weight: 700;
	font-size: .72rem;
	color: var(--sln-red);
	margin: 0 0 .55rem;
}

.blog-card .blog-card__title {
	font-size: 1.1rem;
	line-height: 1.35;
	margin: 0 0 .55rem;
	text-transform: none;
	letter-spacing: 0;
	text-align: left;
}

.blog-card__title a {
	color: var(--sln-navy);
	text-decoration: none;
}

.blog-card__title a:hover {
	color: var(--sln-red);
}

.blog-card__excerpt {
	color: var(--color-text);
	font-size: .95rem;
	line-height: 1.6;
	margin: 0 0 1.15rem;
}

.blog-card__more {
	margin-top: auto;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .8rem;
	color: var(--sln-red);
}

.blog-card:hover .blog-card__more {
	color: var(--sln-red-600);
}

/* Whole card is a click target: the title link is stretched over the entire card */
.blog-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.blog-empty {
	text-align: center;
	color: var(--color-text);
	font-size: 1.05rem;
	padding-block: 2rem;
}

/* Pagination */
.blog-pagination {
	margin-top: clamp(2rem, 5vw, 3.25rem);
}

.blog-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
}

.blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6rem;
	height: 2.6rem;
	padding: 0 .85rem;
	border: 1px solid var(--color-rule);
	border-radius: 8px;
	background: var(--sln-white);
	color: var(--sln-navy);
	font-weight: 700;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.blog-pagination .page-numbers:hover {
	border-color: var(--sln-navy);
}

.blog-pagination .page-numbers.current {
	background: var(--sln-navy);
	color: var(--sln-white);
	border-color: var(--sln-navy);
}

.blog-pagination .page-numbers.dots {
	border: 0;
	background: transparent;
}

/* ---- Single article ---- */
.post-single {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.post-single__back {
	display: inline-block;
	margin-bottom: 1.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .8rem;
	color: var(--sln-red);
	text-decoration: none;
}

.post-single__back:hover {
	color: var(--sln-red-600);
}

.post-single__eyebrow {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 700;
	font-size: .8rem;
	color: var(--sln-red);
	margin: 0 0 .75rem;
}

.post-single__title {
	font-size: clamp(2rem, 4.5vw, 3rem);
	line-height: 1.12;
	margin: 0 0 .85rem;
	color: var(--sln-navy);
}

.post-single__date {
	color: #6a7581;
	font-size: .95rem;
	margin: 0 0 2.25rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-rule);
}

/* Prose typography */
.entry-content {
	font-size: 1.08rem;
	line-height: 1.75;
	color: var(--color-text);
}

.entry-content > *:first-child {
	margin-top: 0;
}

.entry-content p {
	margin: 0 0 1.4rem;
}

.entry-content h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.2;
	color: var(--sln-navy);
	margin: 2.5rem 0 1rem;
}

.entry-content h3 {
	font-size: clamp(1.25rem, 2.4vw, 1.5rem);
	line-height: 1.25;
	color: var(--sln-navy);
	margin: 2rem 0 .85rem;
}

.entry-content h4 {
	font-size: 1.15rem;
	color: var(--sln-navy);
	margin: 1.75rem 0 .75rem;
}

.entry-content a {
	color: var(--sln-red);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.entry-content a:hover {
	color: var(--sln-red-600);
}

.entry-content ul, .entry-content ol {
	margin: 0 0 1.4rem;
	padding-left: 1.4rem;
}

.entry-content li {
	margin-bottom: .5rem;
}

.entry-content img, .entry-content .wp-block-image img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 2rem auto;
	border-radius: 10px;
	border: 1px solid var(--color-rule);
}

.entry-content figure {
	margin: 2rem 0;
}

.entry-content figcaption {
	text-align: center;
	font-size: .85rem;
	color: #6a7581;
	margin-top: .6rem;
}

.entry-content blockquote {
	margin: 2rem 0;
	padding: .35rem 0 .35rem 1.4rem;
	border-left: 4px solid var(--sln-red);
	font-size: 1.15rem;
	font-style: italic;
	color: var(--sln-navy);
}

.entry-content blockquote p:last-child {
	margin-bottom: 0;
}

.entry-content hr {
	border: 0;
	border-top: 1px solid var(--color-rule);
	margin: 2.5rem 0;
}

/* Prev / next */
.post-single__footer {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: 1.75rem;
	border-top: 1px solid var(--color-rule);
}

.post-nav {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.post-nav a {
	color: var(--sln-navy);
	font-weight: 700;
	text-decoration: none;
	max-width: 22rem;
}

.post-nav a:hover {
	color: var(--sln-red);
}

.post-nav__next {
	margin-left: auto;
	text-align: right;
}

/* End-of-article call to action */
.post-cta {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	background: var(--sln-navy);
	border-radius: 14px;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	text-align: center;
}

.post-cta__title {
	color: var(--sln-white);
	font-size: clamp(1.35rem, 3vw, 1.9rem);
	line-height: 1.15;
	margin: 0 0 .6rem;
}

.post-cta__text {
	color: rgba(255, 255, 255, .85);
	max-width: 34rem;
	margin: 0 auto 1.5rem;
	font-size: 1.02rem;
	line-height: 1.6;
}

.post-cta .btn--primary {
	font-size: .9rem;
}

@media (max-width: 720px) {
	.post-nav {
		flex-direction: column;
	}
	
	.post-nav__next {
		margin-left: 0;
		text-align: left;
	}
}

/* =============================================================
   15. v1.7.27 — Locknuts (Products) page
   ============================================================= */
.lk-hero {
	text-align: center;
}

.lk-hero__title {
	font-size: clamp(2rem, 5vw, 3.4rem);
	margin: 0 0 .5rem;
}

.lk-hero__subhead {
	color: var(--sln-red);
	font-weight: 700;
	font-size: clamp(1.1rem, 2vw, 1.45rem);
	margin: 0 0 1.25rem;
	text-transform: none;
}

.lk-hero__lead {
	max-width: 60rem;
	margin: 0 auto;
	font-size: 1.08rem;
	line-height: 1.7;
	color: var(--color-text);
}

.lk-hero__lead a {
	color: var(--sln-red);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.lk-hero__media {
	margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.lk-hero__media img {
	width: 100%;
	max-width: 58rem;
	height: auto;
	margin: 0 auto;
	display: block;
}

/* Inch / Metric spec comparison (dark band) */
.lk-specs {
	background: var(--sln-navy);
	color: #fff;
}

.lk-spec {
	max-width: 62rem;
	margin: 0 auto;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}

.lk-spec__row {
	display: grid;
	grid-template-columns: 1.05fr 1fr 1fr;
}

.lk-spec__row + .lk-spec__row {
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.lk-spec__row--head {
	background: var(--sln-red);
}

.lk-spec__col {
	padding: .95rem 1.25rem;
	font-family: var(--sln-font-head);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
	text-align: center;
	color: #fff;
}

.lk-spec__label {
	padding: 1.1rem 1.25rem;
	font-weight: 800;
	color: #fff;
	background: rgba(255, 255, 255, .05);
	display: flex;
	align-items: center;
}

.lk-spec__cell {
	padding: 1.1rem 1.25rem;
	font-size: .95rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, .9);
}

.lk-spec__cell + .lk-spec__cell {
	border-left: 1px solid rgba(255, 255, 255, .1);
}

.lk-spec__cell ul {
	margin: 0;
	padding-left: 1.05rem;
}

.lk-spec__cell li {
	margin-bottom: .35rem;
}

.lk-muted {
	color: rgba(255, 255, 255, .6);
	font-size: .88rem;
}

/* Content blocks + figures */
.lk-block__intro {
	text-align: center;
	max-width: 46rem;
	margin: 0 auto 2rem;
	font-size: 1.08rem;
	line-height: 1.6;
	color: var(--color-text);
}

.lk-figure {
	margin: 0;
}

.lk-figure img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
	border: 1px solid var(--color-rule);
	border-radius: 10px;
	background: #fff;
}

.section--alt {
	background: var(--color-bg-alt);
}

/* Recessed lock ring: heading left, diagram right */
.lk-recessed__row {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

.lk-recessed__row + .lk-recessed__row {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.lk-red {
	color: var(--sln-red);
	text-transform: none;
	font-size: clamp(1.4rem, 2.8vw, 2.1rem);
	line-height: 1.15;
	margin: 0;
}

.lk-cta-band {
	padding-top: 0;
}

@media (max-width: 720px) {
	.lk-spec__row {
		grid-template-columns: 1fr;
	}
	
	.lk-spec__row--head {
		display: none;
	}
	
	.lk-spec__label {
		background: rgba(255, 255, 255, .09);
	}
	
	.lk-spec__cell + .lk-spec__cell {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .1);
	}
	
	.lk-spec__cell::before {
		display: block;
		font-weight: 800;
		color: #ff6b74;
		text-transform: uppercase;
		font-size: .7rem;
		letter-spacing: .05em;
		margin-bottom: .3rem;
	}
	
	.lk-spec__cell--inch::before {
		content: "Inch Series";
	}
	
	.lk-spec__cell--metric::before {
		content: "Metric Series";
	}
	
	.lk-recessed__row {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}

.media-card__thumb {
	display: block;
	width: 100%;
	overflow: hidden;
}

.media-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* v1.8.0 — By the Numbers: widen the band and tighten the gutters so the stat
   labels spread left-to-right instead of wrapping to a third line. */
.section--stats > .container {
	max-width: 90rem;
	padding-inline: clamp(1rem, 2vw, 1.5rem);
}

.section--stats .stats {
	gap: clamp(.5rem, 1.5vw, 2rem);
}

.section--stats .stat {
	padding: 1rem .5rem;
}

/* v1.8.1 — Header: search box on its own, left of a stacked social-icons-over-
   phone group, all right-aligned in the main header row. Nav pinned to true
   page centre so it does not drift as that group grows. */
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	grid-template-columns: none;
}

.site-header__inner > .site-nav {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.site-nav__searchitem {
	display: none;
}

.site-utility {
	display: flex;
	align-items: center;
	justify-self: end;
	gap: 1.25rem;
}

.site-utility__stack {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .3rem;
}

.site-utility__phone {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--sln-navy);
	font-size: .95rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.site-utility__phone svg {
	width: 1rem;
	height: 1rem;
	flex: none;
	color: var(--sln-red);
}

.site-utility__phone:hover, .site-utility__phone:focus-visible {
	color: var(--sln-red);
}

.site-utility__social {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-utility__social li {
	margin: 0;
}

.site-utility__social a {
	display: inline-flex;
	color: var(--sln-navy);
}

.site-utility__social svg {
	width: 1.05rem;
	height: 1.05rem;
}

.site-utility__social a:hover, .site-utility__social a:focus-visible {
	color: var(--sln-red);
}

.site-search {
	display: flex;
	align-items: stretch;
	align-self: center;
	transform: translate(-.25rem, .2rem);
}

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

.site-search__field {
	width: 11rem;
	padding: .45rem .7rem;
	border: 1px solid var(--color-rule);
	border-right: 0;
	border-radius: 4px 0 0 4px;
	background: #fff;
	color: var(--sln-navy);
	font: inherit;
	font-size: .95rem;
	line-height: 1.4;
}

.site-search__field::placeholder {
	color: #7c848a;
}

.site-search__field:focus {
	outline: 2px solid var(--sln-red);
	outline-offset: -1px;
}

.site-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .45rem .75rem;
	border: 1px solid var(--sln-red);
	border-radius: 0 4px 4px 0;
	background: var(--sln-red);
	color: #fff;
	cursor: pointer;
}

.site-search__submit svg {
	width: 1.05rem;
	height: 1.05rem;
}

.site-search__submit:hover {
	filter: brightness(1.1);
}

@media (max-width: 91rem) {
	.site-utility {
		gap: .9rem;
	}
	
	.site-search__field {
		width: 8rem;
	}
}

@media (max-width: 85rem) {
	.site-utility .site-search {
		display: none;
	}
}

@media (max-width: 66rem) {
	.site-utility {
		display: none;
	}
}

@media (max-width: 720px) {
	/* Header is logo + hamburger only — no phone, socials or search here. */
	.site-utility {
		display: none;
	}
	
	.site-header__inner > .site-nav {
		position: static;
		left: auto;
		transform: none;
	}
	
	.nav-toggle {
		margin-left: auto;
	}
	
	/* Search appears as the last item inside the dropdown panel. */
	.site-nav__searchitem {
		display: block;
		padding: .9rem clamp(1.15rem, 5vw, 2rem);
		border-bottom: 1px solid rgba(0, 36, 57, .07);
	}
	
	.site-nav__search {
		display: flex;
		width: 100%;
		transform: none;
	}
	
	.site-nav__search .site-search__field {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}
}

/* v1.8.3 — Client logo marquee shows the logos in full colour. */
.logo-marquee__item img {
	filter: none;
	opacity: 1;
}

.logo-marquee__item img:hover {
	filter: none;
	opacity: 1;
}

/* v1.8.4 — Widow control. text-wrap: balance evens out short headline blocks;
   text-wrap: pretty stops a single word dropping to its own last line in body
   copy. Both degrade to normal wrapping where unsupported. */
h1, h2, h3, h4, .hero__headline, .hero__subheading, .herostatement__headline, .herostatement__subhead, .section__eyebrow, .blog-card__title, .compare__head, .stat__label {
	text-wrap: balance;
}

p, .lead, .lead--wide, .section__intro, .section__intro--invert, .blog-card__excerpt, .site-footer__copy, .site-footer__legal {
	text-wrap: pretty;
}

/* v1.8.5 — Laptop widths: the four-across card grids were only 1120px wide on
   a 1440px screen, squeezing each card to 262px and forcing single-word last
   lines. Give those sections more of the available width. */
@media (min-width: 75rem) {
	.section--intro > .container, .section--industries > .container, .section--approach > .container, .section--compare > .container {
		max-width: 86rem;
	}
}

/* =========================================================
   Services page (/solutions)
   ========================================================= */
.section--redband {
	background: var(--sln-red);
	color: var(--color-text-invert);
}

.section--redband h2, .section--redband h3 {
	color: var(--color-text-invert);
}

.prod-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.prod-card, .prod-wide {
	background: rgba(0, 0, 0, .09);
	padding: 2.5rem 1.75rem 3rem;
	text-align: center;
}

.prod-card img, .prod-wide__cube {
	display: block;
	width: 118px;
	height: auto;
	margin: 0 auto 1.25rem;
}

.prod-card h3, .prod-wide h3 {
	margin: 0 0 .85rem;
	font-size: 1.3rem;
	line-height: 1.25;
}

.prod-card p, .prod-wide p {
	margin: 0;
	font-size: .95rem;
	line-height: 1.6;
}

.section--redband .prod-card a, .section--redband .prod-wide a, .section--redband .prod-card a:hover, .section--redband .prod-wide a:hover {
	color: var(--color-text-invert);
	text-decoration: underline;
}

.prod-wide {
	margin-top: 1.5rem;
}

.prod-wide__row {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 2.5rem;
	align-items: center;
	text-align: left;
	margin-top: 2rem;
}

.prod-wide__row p + p {
	margin-top: 1rem;
}

.prod-wide__media img {
	display: block;
	width: 100%;
	height: auto;
}

.why-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.75rem 1.5rem;
	margin-top: 2.5rem;
}

.why-item {
	text-align: center;
}

.why-item img {
	display: block;
	width: 74px;
	height: 74px;
	margin: 0 auto .9rem;
}

.why-item span {
	display: block;
	font-size: .95rem;
	line-height: 1.45;
}

@media (max-width: 66rem) {
	.prod-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.why-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 60rem) {
	.prod-wide__row {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
}

@media (max-width: 560px) {
	.prod-grid {
		grid-template-columns: 1fr;
	}
	
	.why-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* =========================================================
   Footer association logos
   ========================================================= */
.site-footer__assoc {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__assoc-item {
	background: var(--sln-white);
	border-radius: 3px;
	width: 82px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px 7px;
	box-sizing: border-box;
}

.site-footer__assoc-item img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.site-footer__assoc-item a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	line-height: 0;
}

.site-footer__assoc-item {
	transition: transform .15s ease, box-shadow .15s ease;
}

.site-footer__assoc-item:hover, .site-footer__assoc-item:focus-within {
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

/* IFI only publishes a reverse (white) logo, so render it as a
   one-colour dark mark to sit on the white tile with the others. */
.site-footer__assoc-item--mono img {
	filter: brightness(0);
}

/* =========================================================
   Industries page (/industries)
   ========================================================= */
.uses-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .65rem 2rem;
	list-style: none;
	margin: 2rem auto 0;
	padding: 0;
	max-width: 60rem;
	text-align: left;
}

.uses-grid li {
	position: relative;
	padding-left: 1.5rem;
	line-height: 1.45;
}

.uses-grid li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: .5rem;
	height: .5rem;
	background: var(--color-primary);
	transform: rotate(45deg);
}

.ind-hexband {
	text-align: center;
}

.hexgrid {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 2.5rem;
}

.hexgrid__row {
	display: flex;
	justify-content: center;
	gap: .5rem;
}

.hexgrid__row + .hexgrid__row {
	margin-top: -3.1rem;
}

.hex {
	display: block;
	width: 11.5rem;
	max-width: 30vw;
	transition: transform .18s ease;
}

.hex:hover, .hex:focus-visible {
	transform: translateY(-4px);
}

.hex img {
	display: block;
	width: 100%;
	height: auto;
}

.hex__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 66rem) {
	.uses-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 60rem) {
	.uses-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	
	.hexgrid__row + .hexgrid__row {
		margin-top: -2.2rem;
	}
}

@media (max-width: 560px) {
	.uses-grid {
		grid-template-columns: 1fr;
	}
	
	.hexgrid__row {
		flex-wrap: wrap;
	}
	
	.hexgrid__row + .hexgrid__row {
		margin-top: .5rem;
	}
	
	.hex {
		width: 8.5rem;
		max-width: 42vw;
	}
}

/* =========================================================
   Industry detail pages
   ========================================================= */
.uses-grid--tight {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 34rem;
	gap: .6rem 1.5rem;
}

.hexgrid--lg .hex {
	width: 15rem;
	max-width: 30vw;
}

.hexgrid--lg .hexgrid__row {
	gap: .6rem;
}

.hexgrid--lg .hexgrid__row + .hexgrid__row {
	margin-top: -4.2rem;
}

/* Railroad's photos ship as pre-cut hexagons with a red rim baked in.
   The other industries ship as squares, so cut + rim them here to match. */
.hex--clip {
	background: #a01a24;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	padding: 6px;
}

.hex--clip img {
	aspect-ratio: 1/1.12;
	object-fit: cover;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.lk-hero__lead + .lk-hero__lead {
	margin-top: 1.15rem;
}

@media (max-width: 60rem) {
	.uses-grid--tight {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 24rem;
	}
	
	.hexgrid--lg .hexgrid__row + .hexgrid__row {
		margin-top: -3rem;
	}
}

@media (max-width: 560px) {
	.uses-grid--tight {
		grid-template-columns: 1fr;
	}
	
	.hexgrid--lg .hex {
		width: 9rem;
		max-width: 44vw;
	}
	
	.hexgrid--lg .hexgrid__row {
		flex-wrap: wrap;
	}
	
	.hexgrid--lg .hexgrid__row + .hexgrid__row {
		margin-top: .5rem;
	}
}

/* =========================================================
   About page (/about)
   ========================================================= */
.section__subhead {
	color: var(--color-primary);
	font-weight: 700;
	font-size: 1.1rem;
	margin: -.35rem 0 1.25rem;
}

.section__subhead--invert {
	color: rgba(255, 255, 255, .78);
}

.section--navy {
	background: var(--color-surface-dark);
	color: var(--color-text-invert);
}

.section--navy h2 {
	color: var(--color-text-invert);
}

.hist-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
	align-items: end;
}

.hist-fig {
	margin: 0;
	text-align: center;
}

.hist-fig img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--sln-white);
}

.hist-fig figcaption {
	margin-top: .85rem;
	font-size: .9rem;
	font-weight: 700;
	color: var(--color-text-invert);
}

.about-photo {
	margin: 2.25rem 0 0;
}

.about-photo img {
	display: block;
	width: 100%;
	height: auto;
}

.about-photo figcaption {
	margin-top: .75rem;
	font-size: .9rem;
	opacity: .85;
}

@media (max-width: 60rem) {
	.hist-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.75rem;
	}
}

@media (max-width: 560px) {
	.hist-grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   Contact page (/contact)
   ========================================================= */
.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.35fr;
	gap: 3.5rem;
	text-align: left;
	align-items: start;
}

.contact-grid h2 {
	margin-top: 0;
	text-align: left;
	font-size: 1.6rem;
}

.contact-details p {
	margin: 0 0 1.1rem;
	line-height: 1.6;
}

.contact-details__addr {
	font-weight: 700;
}

.contact-details__tag {
	display: inline-block;
	margin-left: .4rem;
	font-size: .8rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #6b7076;
}

.contact-details__label {
	margin-bottom: .2rem;
	font-weight: 700;
	color: var(--color-heading);
}

.contact-details a {
	color: var(--color-primary);
}

/* WPForms — pull the plugin's defaults toward the site's styling */
.contact-form .wpforms-field-label {
	font-size: .85rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--color-heading);
}

.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form textarea, .contact-form select {
	width: 100%;
	max-width: 100%;
	border: 1px solid var(--color-rule);
	border-radius: 2px;
	padding: .6rem .75rem;
	font-family: inherit;
	font-size: 1rem;
}

.contact-form input:focus, .contact-form textarea:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 1px;
}

.contact-form button.wpforms-submit, .contact-form .wpforms-submit {
	background: var(--color-primary);
	border: 0;
	border-radius: 2px;
	color: var(--color-text-invert);
	cursor: pointer;
	font-weight: 700;
	letter-spacing: .06em;
	padding: .85rem 2rem;
	text-transform: uppercase;
}

.contact-form button.wpforms-submit:hover, .contact-form .wpforms-submit:hover {
	background: var(--color-primary-hover);
}

@media (max-width: 66rem) {
	.contact-grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

/* WPForms exposes its theming through custom properties — set them
   rather than fighting the plugin stylesheet on specificity. */
.contact-form .wpforms-container {
	--wpforms-button-background-color: #d0202e;
	--wpforms-button-background-color-alt: #b21b27;
	--wpforms-button-text-color: #fff;
	--wpforms-button-border-radius: 2px;
	--wpforms-button-size-font-size: 15px;
	--wpforms-field-border-color: #c5c8ca;
	--wpforms-field-border-radius: 2px;
	--wpforms-label-color: #002439;
	--wpforms-label-sublabel-color: #6b7076;
	--wpforms-label-error-color: #d0202e;
}

/* =========================================================
   Nut motifs — keep them fully inside the section
   =========================================================
   The originals were anchored past the corner (right -42px bottom -48px)
   and sized for tall heroes, so on a short hero — Contact worst of all,
   at 255px against a 250px nut — both motifs were sliced off. Centre them
   vertically and size them to clear the shortest hero. */
.section--intro {
	background-position: 60px center, right 60px center, 0 0;
	background-size: 190px, 150px, 0;
}

.section--herostatement {
	background-position: 60px center, right 60px center;
	background-size: 150px, 190px;
}

@media (max-width: 60rem) {
	.section--intro, .section--herostatement {
		background-image: none;
	}
	
	.section--intro.nitro-lazy, .section--herostatement.nitro-lazy {
		background-image: none !important;
	}
}

/* Stats row: 5 rigid columns never collapsed, so the home page scrolled
   sideways by ~99px on a phone. Let it wrap. */
@media (max-width: 66rem) {
	.section--stats .stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 1.5rem;
	}
}

@media (max-width: 34rem) {
	.section--stats .stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}