/* ==========================================================================
   Metro Sales — custom.css
   Global styles first, then header, homepage components, footer, responsive.
   All values come from the approved design (homepage-1b.html, 1920px canvas).
   ========================================================================== */

/* =========================
   FONTS (self-hosted)
========================= */
@font-face {
	font-family: 'Mukta';
	src: url('../fonts/mukta-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Mukta';
	src: url('../fonts/mukta-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Mukta';
	src: url('../fonts/mukta-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Mukta';
	src: url('../fonts/mukta-800.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/open-sans-variable.woff2') format('woff2');
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Mono';
	src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Mono';
	src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Mono';
	src: url('../fonts/ibm-plex-mono-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* =========================
   GLOBAL STYLES
========================= */
:root {
	--gutter: 96px;
	--font-heading: 'Mukta', sans-serif;
	--font-body: 'Open Sans', sans-serif;
	--font-mono: 'IBM Plex Mono', monospace;
	--blue: #005f89;
	--blue-dark: #00445f;
	--sky: #8fcbe4;
	--orange: #f2723b;
	--navy: #1f2c3a;
	--ink: #22252b;
	--slate: #5c6672;
	--mist: #e9f2f6;
	--utility-height: 38px;
	--main-bar-height: 78px;
	--admin-bar-height: 0px;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--utility-height) + var(--main-bar-height)); /* anchors land below the sticky header */
}

body {
	margin: 0;
	background: #22252b;
	color: #eef1f5;
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.site {
	width: 1920px;
	max-width: 100%;
	margin: 0 auto;
	background: #171a20;
	color: #eef1f5;
	overflow: hidden;
	overflow: clip; /* clips like hidden but isn't a scroll container, so the sticky header works */
	box-shadow: 0 0 60px rgba(0, 0, 0, .5);
}

.container {
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.row {
	display: flex;
}

.row.center {
	align-items: center;
}

.col {
	min-width: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	color: inherit;
}

h1 {
	font-weight: 800;
	font-size: 68px;
	line-height: 1.06;
	letter-spacing: -1.2px;
	margin-bottom: 20px;
}

h2 {
	font-size: 38px;
	line-height: 1.14;
	letter-spacing: -.5px;
}

h3 {
	font-size: 22px;
}

h4,
.h4 {
	font-size: 23px;
	letter-spacing: 0;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

p {
	margin: 0 0 16px;
}

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

a:hover {
	color: var(--blue-dark);
}

ul,
ol {
	margin: 0 0 16px;
	padding-left: 1.5em;
}

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

img {
	height: auto;
	border: 0;
}

figure,
blockquote {
	margin: 0;
}

address {
	font-style: normal;
}

button,
input,
select,
textarea {
	font: inherit;
}

sup.reg {
	font-size: 18px;
	vertical-align: super;
}

.eyebrow {
	font: 600 12px var(--font-mono);
	letter-spacing: 1.5px;
	color: var(--sky);
	text-transform: uppercase;
	margin-bottom: 10px;
}

.eyebrow.blue {
	color: var(--blue);
}

/* Screen reader / focus */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
	clip: auto !important;
	clip-path: none;
	color: var(--ink);
	display: block;
	font-size: 14px;
	font-weight: 700;
	height: auto;
	left: 8px;
	padding: 14px 22px;
	top: 8px;
	width: auto;
	z-index: 100000;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--sky);
	outline-offset: 3px;
}

/* Icons uploaded as PNG/JPG (SVG icons are inlined and use currentColor) */
img.icon {
	display: block;
	object-fit: contain;
}

/* Full-card click target for cards with a single link */
.stretched::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
}

/* WordPress core content classes (inner pages) */
.alignleft {
	float: left;
	margin: 0 24px 16px 0;
}

.alignright {
	float: right;
	margin: 0 0 16px 24px;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption,
.gallery-caption {
	max-width: 100%;
	font-size: 13px;
}

/* =========================
   BUTTONS
========================= */
.btn {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 15px 20px;
	background: var(--blue);
	border: 0;
	border-radius: 7px;
	font: 700 16px var(--font-heading);
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 6px 22px rgba(0, 95, 137, .4);
	transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.btn:hover,
.btn:focus-visible {
	background: var(--blue-dark);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 95, 137, .42);
}

.btn .arrow {
	flex: none;
}

/* Animated light sweep */
.btn.sheen::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 38%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent);
	animation: ms-sheen 6s ease-in-out infinite;
	pointer-events: none;
}

.btn.small {
	padding: 12px 20px;
	font-size: 15px;
	box-shadow: 0 3px 14px rgba(0, 95, 137, .3);
}

.btn.header {
	gap: 8px;
	padding: 11px 18px;
	border-radius: 6px;
	font-size: 15px;
	box-shadow: 0 2px 10px rgba(0, 95, 137, .35);
}

.btn.header:hover,
.btn.header:focus-visible {
	box-shadow: 0 8px 20px rgba(0, 95, 137, .45);
}

.btn.white {
	padding: 15px 26px;
	background: #fff;
	color: var(--navy);
	box-shadow: 0 6px 22px rgba(0, 0, 0, .25);
}

.btn.white:hover,
.btn.white:focus-visible {
	background: #fff;
	color: var(--navy);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}

.btn.white.sheen::after {
	background: linear-gradient(90deg, transparent, rgba(0, 95, 137, .22), transparent);
	animation-duration: 3.8s;
}

/* Outline on dark backgrounds */
.btn.outline {
	padding: 15px 23px;
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, .32);
	color: #eef1f5;
	box-shadow: none;
}

.btn.outline:hover,
.btn.outline:focus-visible {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .6);
	color: #eef1f5;
	transform: none;
	box-shadow: none;
}

.btn.outline.small {
	gap: 8px;
	padding: 12px 20px;
	border-color: rgba(255, 255, 255, .3);
}

/* Outline buttons ("All industries" style) on light sections: same shape, blue instead of white. */
.home-intro.layout-service .btn.outline,
.job-openings-section .btn.outline {
	border-color: var(--blue);
	color: var(--blue);
}

.home-intro.layout-service .btn.outline:hover,
.home-intro.layout-service .btn.outline:focus-visible,
.job-openings-section .btn.outline:hover,
.job-openings-section .btn.outline:focus-visible {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}

/* Sand outline (Get Resources) */
.btn.outline-sand {
	background: transparent;
	border: 2px solid #6b6250;
	color: #6b6250;
	box-shadow: none;
}

.btn.outline-sand:hover,
.btn.outline-sand:focus-visible {
	background: #6b6250;
	color: #fbfaf7;
	transform: none;
	box-shadow: none;
}

.btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.btn-group.center {
	justify-content: center;
}

/* =========================
   HEADER — UTILITY BAR
========================= */
/* Sticky: the whole header (utility bar + main bar) stays pinned to the top. */
.site-header {
	position: sticky;
	top: var(--admin-bar-height);
	z-index: 20;
}

.admin-bar {
	--admin-bar-height: 32px;
}

/* WP admin bar breakpoints: 46px tall at ≤782px, scrolls with the page at ≤600px. */
@media (max-width: 782px) {
	.admin-bar {
		--admin-bar-height: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar {
		--admin-bar-height: 0px;
	}
}

.utility-bar {
	background: #15171c;
	color: #8a9099;
	font: 400 12.5px var(--font-body);
}

.utility-bar .container {
	display: flex;
	align-items: center;
	gap: 26px;
	height: var(--utility-height);
}

.utility-bar .tagline {
	color: var(--sky);
	font: 600 12px var(--font-mono);
	letter-spacing: 1.2px;
	text-transform: uppercase;
	white-space: nowrap;
}

.utility-bar .spacer {
	flex: 1;
}

.utility-bar a {
	color: #8a9099;
	white-space: nowrap;
	transition: color .15s ease;
}

.utility-bar a:hover {
	color: #fff;
}

.utility-bar .divider {
	width: 1px;
	height: 14px;
	background: #33363d;
}

.utility-nav .menu {
	display: flex;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.utility-nav .menu > li:last-child > a {
	color: #e7ecf2;
	font-weight: 600;
}

/* =========================
   HEADER — MAIN NAV
========================= */
.main-bar {
	position: relative;
	z-index: 5;
	background: var(--navy);
	border-bottom: 1px solid #2c3d4e;
}

.main-bar .container {
	display: flex;
	align-items: center;
	gap: 30px;
	height: var(--main-bar-height);
}

.site-logo {
	flex: none;
	display: block;
}

.site-logo img {
	display: block;
	width: auto;
	height: 32px;
}

.site-logo .site-title {
	font: 800 22px var(--font-heading);
	color: #fff;
}

.main-navigation {
	flex: 1;
	align-self: stretch;
	display: flex;
}

.main-navigation .menu {
	display: flex;
	align-items: stretch;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation .menu > li {
	position: relative;
	display: flex;
}

.main-navigation .menu > li > a {
	display: flex;
	align-items: center;
	font: 600 14.5px var(--font-body);
	color: #aebbc7;
	white-space: nowrap;
	transition: color .15s ease, box-shadow .15s ease;
}

.main-navigation .menu > li:first-child > a,
.main-navigation .menu > li > a:hover,
.main-navigation .menu > li:focus-within > a,
.main-navigation .menu > .current-menu-item > a,
.main-navigation .menu > .current-menu-ancestor > a {
	color: #fff;
}

.main-navigation .menu > .current-menu-item > a,
.main-navigation .menu > .current-menu-ancestor > a {
	box-shadow: inset 0 -3px 0 var(--sky);
}

/* Hover stays orange, also on the current item */
.main-navigation .menu > li > a:hover,
.main-navigation .menu > li:focus-within > a {
	box-shadow: inset 0 -3px 0 var(--orange);
}

/* Dropdowns (sub-items added in Appearance → Menus) */
.main-navigation .menu > .menu-item-has-children > a {
	padding-right: 16px; /* room for the angle icon, so the underline spans it */
}

.submenu-toggle {
	position: absolute;
	top: 2px;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 16px;
	padding: 0;
	background: none;
	border: 0;
	color: #aebbc7;
	cursor: pointer;
}

.submenu-toggle .angle {
	display: block;
	transition: transform .2s ease;
}

.main-navigation .menu > li:first-child > .submenu-toggle,
.main-navigation .menu > li:hover > .submenu-toggle,
.main-navigation .menu > li:focus-within > .submenu-toggle,
.main-navigation .menu > .current-menu-item > .submenu-toggle,
.main-navigation .menu > .current-menu-ancestor > .submenu-toggle {
	color: #fff;
}

.main-navigation li:hover > .submenu-toggle .angle,
.main-navigation li:focus-within > .submenu-toggle .angle,
.main-navigation li.is-open > .submenu-toggle .angle {
	transform: rotate(180deg);
}

.main-navigation .sub-menu {
	position: absolute;
	z-index: 10;
	top: 100%;
	left: -18px;
	min-width: 250px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--navy);
	border: 1px solid #2c3d4e;
	border-top: 0;
	border-radius: 0 0 9px 9px;
	box-shadow: 0 16px 30px rgba(0, 0, 0, .35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu,
.main-navigation li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.main-navigation .sub-menu a {
	display: block;
	padding: 10px 20px;
	font: 600 14px/1.35 var(--font-body);
	color: #aebbc7;
	white-space: nowrap;
	transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}

.main-navigation .sub-menu .current-menu-item > a {
	color: #fff;
	box-shadow: inset 3px 0 0 var(--sky);
}

.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu a:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, .05);
	box-shadow: inset 3px 0 0 var(--orange);
}

/* Nested dropdowns: fly out to the side, angle points right. */
.main-navigation .sub-menu li {
	position: relative;
}

.main-navigation .sub-menu .menu-item-has-children > a {
	padding-right: 44px;
}

.main-navigation .sub-menu .submenu-toggle {
	right: 16px;
}

.main-navigation .sub-menu li:hover > .submenu-toggle,
.main-navigation .sub-menu li:focus-within > .submenu-toggle,
.main-navigation .sub-menu .current-menu-ancestor > .submenu-toggle {
	color: #fff;
}

.main-navigation .sub-menu .submenu-toggle .angle,
.main-navigation .sub-menu li:hover > .submenu-toggle .angle,
.main-navigation .sub-menu li:focus-within > .submenu-toggle .angle,
.main-navigation .sub-menu li.is-open > .submenu-toggle .angle {
	transform: rotate(-90deg);
}

.main-navigation .sub-menu .current-menu-ancestor > a {
	color: #fff;
}

.main-navigation .sub-menu .sub-menu {
	top: -9px;
	left: 100%;
	border-top: 1px solid #2c3d4e;
	border-radius: 9px;
	transform: translateX(6px);
}

.main-navigation .sub-menu li:hover > .sub-menu,
.main-navigation .sub-menu li:focus-within > .sub-menu,
.main-navigation .sub-menu li.is-open > .sub-menu {
	transform: none;
}

/* Not enough room on the right (set by custom.js): open to the left instead. */
.main-navigation .menu > li > .sub-menu.flip {
	left: auto;
	right: -18px;
}

.main-navigation .sub-menu .sub-menu.flip {
	left: auto;
	right: 100%;
	transform: translateX(-6px);
}

.header-cta {
	flex: none; /* never squeeze the button label */
}

.main-navigation .mobile-extras,
.menu-toggle {
	display: none;
}

/* =========================
   HOME HERO
========================= */
.home-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(120deg, #171a20 0%, #1f2c3a 58%, #243748 100%);
	color: #eef1f5;
}

.home-hero .glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(10px);
	pointer-events: none;
}

.home-hero .glow-blue {
	width: 520px;
	height: 520px;
	right: -120px;
	top: -180px;
	background: radial-gradient(circle, rgba(0, 95, 137, .45), transparent 68%);
}

.home-hero .glow-violet {
	width: 340px;
	height: 340px;
	left: -120px;
	bottom: -160px;
	background: radial-gradient(circle, rgba(120, 90, 214, .28), transparent 70%);
}

.hero-mesh {
	position: absolute;
	top: 0;
	left: -320px;
	width: 1920px;
	max-width: none;
	height: 100%;
	opacity: .85;
	pointer-events: none;
}

.hero-mesh .mesh-flow path {
	animation: ms-flow 4.2s linear infinite;
}

.hero-mesh .mesh-flow path:nth-child(2) {
	animation-delay: 1.6s;
}

.hero-mesh .mesh-nodes circle {
	animation: ms-pulse 3.2s ease-in-out infinite;
}

.hero-mesh .mesh-nodes circle:nth-child(2) { animation-delay: .4s; }
.hero-mesh .mesh-nodes circle:nth-child(3) { animation-delay: .8s; }
.hero-mesh .mesh-nodes circle:nth-child(4) { animation-delay: 1.2s; }
.hero-mesh .mesh-nodes circle:nth-child(5) { animation-delay: .6s; }
.hero-mesh .mesh-nodes circle:nth-child(6) { animation-delay: 1.6s; }
.hero-mesh .mesh-nodes circle:nth-child(7) { animation-delay: 1s; }
.hero-mesh .mesh-nodes circle:nth-child(8) { animation-delay: 2s; }
.hero-mesh .mesh-nodes circle:nth-child(9) { animation-delay: 2.4s; }

.home-hero .container {
	position: relative;
	padding-bottom: 66px;
}

.hero-row {
	align-items: center;
	justify-content: space-between;
	gap: 56px;
	padding: 96px 0 54px;
}

.hero-content {
	flex: 1.05;
	max-width: 700px;
}

.hero-content h1 {
	text-wrap: balance;
}

.hero-underline {
	display: block;
	margin: -8px 0 24px;
}

.hero-content .text {
	max-width: 560px;
	margin: 0 0 34px;
	font: 400 18px/1.62 var(--font-body);
	color: #c3ccd6;
}

.hero-panel {
	position: relative;
	flex: none;
	width: 520px;
	height: 400px;
	border-radius: 14px;
	background: linear-gradient(150deg, #1b2531, #22313f);
	border: 1px solid rgba(143, 203, 228, .2);
	box-shadow: 0 14px 40px rgba(0, 0, 0, .3);
}

.hero-panel .eyebrow {
	position: absolute;
	top: 23px;
	left: 25px;
	margin: 0;
	letter-spacing: 1.4px;
}

.panel-items {
	position: absolute;
	top: 59px;
	left: 25px;
	right: 25px;
	bottom: 25px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.panel-item {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 14px 20px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .16);
}

.panel-item:first-child {
	background: linear-gradient(100deg, rgba(0, 95, 137, .34), rgba(0, 95, 137, .10));
	border-color: rgba(143, 203, 228, .3);
}

.panel-item .icon {
	flex: none;
	width: 40px;
	height: 40px;
	color: var(--sky);
}

.panel-item .item-title {
	font: 700 20px var(--font-heading);
	color: #fff;
}

.panel-item .item-text {
	margin-top: 3px;
	font: 400 14px var(--font-body);
	color: #a9c2cd;
}

/* Linked panel items: the whole box is the click target (.stretched). */
.panel-item.has-link {
	position: relative;
	transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.panel-item.has-link:hover,
.panel-item.has-link:focus-within {
	background-color: rgba(143, 203, 228, .13);
	border-color: var(--sky);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
	transform: translateY(-2px);
}

.panel-item .item-title a {
	color: inherit;
}

.hero-stats {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, .18);
}

.hero-stats .stat {
	flex: 1;
	padding: 22px 26px 0;
	border-left: 1px solid rgba(255, 255, 255, .18);
}

.hero-stats .stat:first-child {
	padding-left: 0;
	border-left: 0;
}

.hero-stats .stat:last-child {
	padding-right: 0;
}

.hero-stats .stat-number {
	font: 800 34px var(--font-heading);
	line-height: 1;
	color: #fff;
}

.hero-stats .stat-number.highlight {
	color: var(--orange);
}

.hero-stats .stat-label {
	margin-top: 6px;
	font: 600 12px var(--font-mono);
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: #9db3c4;
}

/* =========================
   HOME PATH CARDS
========================= */
.home-paths {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: #fbfaf7;
}

.path-card {
	position: relative;
	overflow: hidden;
	padding: 30px var(--gutter) 34px;
	color: var(--ink);
}

.path-card.blue {
	background: var(--mist);
	border-right: 1px solid #cfe0e8;
}

.path-card.blue::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(0, 95, 137, .16) 1.3px, transparent 1.3px);
	background-size: 18px 18px;
	-webkit-mask: radial-gradient(120% 110% at 100% 0%, #000 10%, transparent 62%);
	mask: radial-gradient(120% 110% at 100% 0%, #000 10%, transparent 62%);
}

.path-card.sand {
	background: #f5f3ee;
}

.path-inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 24px;
}

.path-inner .content {
	flex: 1;
}

.path-card .eyebrow {
	margin-bottom: 6px;
	letter-spacing: 1.4px;
	color: var(--blue);
}

.path-card.sand .eyebrow {
	color: #8a7a3a;
}

.path-card h2 {
	margin: 0 0 4px;
	line-height: normal;
	color: var(--ink);
}

.path-card p {
	margin: 0;
	font: 400 14px var(--font-body);
	color: var(--slate);
}

.path-card .btn {
	flex: none;
}

/* =========================
   HOME INTRO (WHY METRO SALES)
========================= */
.home-intro {
	position: relative;
	overflow: hidden;
	padding: 96px 0 100px;
	background: #1a1d23;
}

.home-intro .contours {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	opacity: .4;
	pointer-events: none;
	-webkit-mask: linear-gradient(90deg, transparent 0 42%, #000 64%);
	mask: linear-gradient(90deg, transparent 0 42%, #000 64%);
}

.intro-row {
	position: relative;
	align-items: center;
	gap: 64px;
}

.intro-content {
	flex: 1.02;
}

.intro-content h2 {
	max-width: 720px;
	margin: 0 0 18px;
	text-wrap: pretty;
}

.intro-content .text p {
	max-width: 720px;
	margin: 0 0 16px;
	font: 400 16px/1.68 var(--font-body);
	color: #a9b7c5;
}

.intro-content .text p:last-child {
	margin-bottom: 30px;
}

.intro-image {
	flex: none;
	width: 602px;
}

.intro-image .img-wrap {
	position: relative;
	height: 402px;
	overflow: hidden;
	border-radius: 11px;
	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: 0 14px 40px rgba(0, 0, 0, .34);
}

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

/* =========================
   HOME SERVICES
========================= */
.home-services {
	position: relative;
	overflow: hidden;
	padding: 82px 0 90px;
	border-top: 1px solid #e6e2d9;
	background-color: var(--mist);
}

.home-services .bg-dots,
.home-services .bg-fade {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.home-services .bg-dots {
	background-image: radial-gradient(rgba(34, 37, 43, .15) 1.4px, transparent 1.4px);
	background-size: 20px 20px;
}

.home-services .bg-fade {
	background: radial-gradient(150% 110% at 50% 0%, transparent 40%, #fbfaf7 92%);
}

.section-head {
	position: relative;
}

.section-head.center {
	text-align: center;
	margin-bottom: 44px;
}

.section-head .underline {
	display: block;
	margin: 2px auto 0;
}

.home-services .section-head h2,
.home-industries .section-head h2,
.home-testimonials .section-head h2,
.home-support .section-head h2 {
	line-height: normal;
}

.home-services .section-head h2 {
	color: var(--ink);
}

.home-services .section-head .text {
	max-width: 560px;
	margin: 16px auto 0;
	font: 400 16px/1.6 var(--font-body);
	color: var(--slate);
}

.service-cards {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

/* Columns option (Services Section). 4 drops to 2 below 1200px; ≤991 is handled below. */
@media (min-width: 992px) {
	.service-cards.cols-2,
	.service-cards.cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1200px) {
	.service-cards.cols-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

.service-card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 30px;
	border-radius: 13px;
	background: #fff;
	border: 1px solid #e2ded4;
	box-shadow: 0 3px 16px rgba(0, 0, 0, .055);
	color: var(--ink);
	isolation: isolate;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Hover: every card takes the dark navy look. The gradient sits on ::before, behind all card content, so it can fade in. */
.service-card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(140deg, #1f2c3a, #2b3a4a);
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
}

.service-card:hover {
	transform: translateY(-4px);
	border-color: var(--navy);
	box-shadow: 0 18px 42px rgba(0, 0, 0, .32);
	color: #eef1f5;
}

.service-card:hover::before {
	opacity: 1;
}

.service-card.dark {
	background: linear-gradient(140deg, #1f2c3a, #2b3a4a);
	border: 0;
	box-shadow: 0 8px 26px rgba(0, 0, 0, .2);
	color: #eef1f5;
}

.service-card.dark:hover {
	box-shadow: 0 18px 42px rgba(0, 0, 0, .32);
}

.service-card .card-dots {
	position: absolute;
	right: -30px;
	bottom: -30px;
	width: 170px;
	height: 170px;
	background-image: radial-gradient(var(--blue) 2.2px, transparent 2.4px);
	background-size: 15px 15px;
	opacity: .16;
	-webkit-mask: radial-gradient(120% 120% at 100% 100%, #000 18%, transparent 62%);
	mask: radial-gradient(120% 120% at 100% 100%, #000 18%, transparent 62%);
	pointer-events: none;
}

.service-card .card-image {
	position: relative;
	height: 184px;
	margin: -30px -30px 24px;
	overflow: hidden;
	border-radius: 13px 13px 0 0;
	background: #dfe8ee;
}

.service-card.dark .card-image {
	background: #16202b;
}

.service-card .card-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(22, 32, 43, .85));
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
}

.service-card.dark .card-image::after,
.service-card:hover .card-image::after {
	opacity: 1;
}

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

.service-card .card-icon {
	position: relative;
	transition: background-color .25s ease, color .25s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 20px;
	border-radius: 11px;
	background: var(--mist);
	color: var(--blue);
}

.service-card.dark .card-icon,
.service-card:hover .card-icon {
	background: rgba(143, 203, 228, .14);
	color: var(--sky);
}

.service-card h3 {
	position: relative;
	transition: color .25s ease;
	margin: 0 0 10px;
	font: 700 22px/1.2 var(--font-heading);
	color: var(--ink);
}

.service-card.dark h3,
.service-card:hover h3 {
	color: #fff;
}

.service-card p {
	position: relative;
	transition: color .25s ease;
	margin: 0 0 18px;
	font: 400 14.5px/1.6 var(--font-body);
	color: var(--slate);
}

.service-card p:last-child {
	margin-bottom: 0;
}

.service-card.dark p,
.service-card:hover p {
	color: #b8c6d4;
}

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 700 14.5px var(--font-heading);
	color: var(--blue);
	transition: color .16s ease, gap .16s ease;
}

.text-link:hover {
	gap: 13px;
}

/* Service card links keep their colour on hover (as in the approved design) */
.service-card .text-link:hover {
	color: var(--blue);
}

.service-card.dark .text-link:hover,
.service-card:hover .text-link:hover {
	color: var(--sky);
}

.service-card .text-link {
	align-self: flex-start;
	margin-top: auto;
}

.service-card .text-link .arrow {
	color: var(--blue);
}

.service-card.dark .text-link,
.service-card.dark .text-link .arrow,
.service-card:hover .text-link,
.service-card:hover .text-link .arrow {
	color: var(--sky);
}

/* =========================
   HOME INDUSTRIES
========================= */
.home-industries {
	position: relative;
	overflow: hidden;
	padding: 78px 0 84px;
	background: var(--ink);
	color: #eef1f5;
}

.home-industries .glow {
	position: absolute;
	width: 420px;
	height: 420px;
	left: -140px;
	top: -160px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 95, 137, .28), transparent 70%);
	filter: blur(8px);
	pointer-events: none;
}

.section-head.split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 40px;
}

.section-head.split .btn,
.section-head.split .support-link {
	flex: none;
}

.home-industries .section-head h2 {
	color: #fff;
}

.home-industries .section-head .text {
	max-width: 520px;
	margin: 14px 0 0;
	font: 400 16px/1.6 var(--font-body);
	color: #a9b7c5;
}

/* Flex (not grid) so an incomplete last row is centred. */
.industry-cards {
	--cols: 4;
	--gap: 16px;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gap);
}

.industry-card {
	flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
	min-width: 0;
	position: relative;
	padding: 22px;
	border-radius: 11px;
	background: rgba(255, 255, 255, .055);
	border: 1px solid rgba(255, 255, 255, .13);
	-webkit-backdrop-filter: blur(3px) saturate(125%);
	backdrop-filter: blur(3px) saturate(125%);
	transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.industry-card:hover {
	background: rgba(143, 203, 228, .13);
	border-color: var(--sky);
	transform: translateY(-3px);
}

.industry-card .icon {
	margin-bottom: 14px;
	color: var(--sky);
}

.industry-card h3 {
	margin: 0 0 4px;
	font: 700 17px var(--font-heading);
	color: #fff;
}

.industry-card h3 a {
	color: inherit;
}

.industry-card p {
	margin: 0;
	font: 400 13px/1.45 var(--font-body);
	color: #c2cfda;
}

/* =========================
   HOME TESTIMONIALS
========================= */
.home-testimonials {
	position: relative;
	overflow: hidden;
	padding: 78px 0 84px;
	background-color: var(--mist);
}

.home-testimonials .section-head.center {
	margin-bottom: 42px;
}

.home-testimonials .section-head h2 {
	color: var(--ink);
}

.testimonial-box {
	position: relative;
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	overflow: hidden;
	background: #fff;
	border: 1px solid #dfe6ea;
	border-radius: 14px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
}

.testimonial-box .featured {
	position: relative;
	overflow: hidden;
	padding: 56px 56px 52px;
	border-right: 1px solid #e6ecef;
}

.testimonial-box .quote-mark {
	position: absolute;
	left: 34px;
	top: 8px;
	font: 800 190px var(--font-heading);
	line-height: .8;
	color: rgba(0, 95, 137, .07);
	pointer-events: none;
}

.testimonial-box .slides {
	display: grid;
}

.testimonial-box .slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateX(24px);
	transition: opacity .45s ease, transform .45s ease, visibility .45s;
}

.testimonial-box .slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.testimonial-box .slide.is-leaving {
	transform: translateX(-24px);
}

.testimonial-box .slides.reverse .slide:not(.is-active) {
	transform: translateX(-24px);
}

.testimonial-box .slides.reverse .slide.is-leaving {
	transform: translateX(24px);
}

.testimonial-box .stars {
	position: relative;
	display: flex;
	gap: 4px;
	margin-bottom: 24px;
	color: var(--orange);
}

.testimonial-box .slide blockquote p {
	position: relative;
	max-width: 700px;
	margin: 0 0 34px;
	font: 700 30px/1.42 var(--font-heading);
	letter-spacing: -.4px;
	color: var(--ink);
	text-wrap: pretty;
}

.testimonial-box .author {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 26px 100px 0 0;
	border-top: 1px solid #e6ecef;
}

.testimonial-box .avatar {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--mist);
}

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

.testimonial-box .author .name {
	display: block;
	font: 700 15.5px var(--font-heading);
	color: var(--ink);
}

.testimonial-box .author .details {
	display: block;
	margin-top: 3px;
	font: 600 12px var(--font-mono);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #7d8996;
}

.slider-controls {
	position: absolute;
	right: 56px;
	bottom: 56px;
	z-index: 2;
	display: flex;
	gap: 8px;
}

.slider-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: 1px solid #cfdbe3;
	border-radius: 6px;
	color: var(--blue);
	cursor: pointer;
	transition: border-color .18s ease;
}

.slider-btn:hover {
	border-color: var(--blue);
}

.testimonial-box .side {
	display: flex;
	flex-direction: column;
}

.side-review {
	padding: 32px 40px;
	border-bottom: 1px solid #e6ecef;
	transition: background .2s ease;
}

.side-review:hover {
	background: #f4f8fa;
}

.side-review .stars-text {
	margin-bottom: 12px;
	font: 600 13px var(--font-mono);
	letter-spacing: 1.4px;
	color: var(--orange);
}

.side-review blockquote p {
	margin: 0 0 16px;
	font: 400 15px/1.65 var(--font-body);
	color: var(--slate);
}

.side-review .details {
	font: 600 12px var(--font-mono);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #7d8996;
}

.review-stats {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--navy);
}

.review-stats li {
	padding: 30px 20px;
	text-align: center;
	border-right: 1px solid rgba(255, 255, 255, .14);
}

.review-stats li:last-child {
	border-right: 0;
}

.review-stats .stat-number {
	font: 800 30px var(--font-heading);
	line-height: 1;
	color: #fff;
}

.review-stats .stat-label {
	margin-top: 6px;
	font: 600 11.5px var(--font-mono);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #a9b7c5;
}

/* =========================
   STITCHED DIVIDER
========================= */
.stitched-divider {
	background: #1a1d23;
}

.stitched-divider .container {
	display: flex;
	align-items: center;
	gap: 20px;
	height: 74px;
}

.stitched-divider .line {
	flex: 1;
	height: 2px;
	background: repeating-linear-gradient(90deg, #343b43 0 8px, transparent 8px 16px);
}

.stitched-divider .diamond {
	width: 16px;
	height: 16px;
	border: 2px solid var(--orange);
	transform: rotate(45deg);
}

/* =========================
   HOME FAQ
========================= */
.home-faq {
	padding: 8px 0 92px;
	background: #1a1d23;
}

.faq-row {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: 60px;
	align-items: center;
}

.faq-intro h2 {
	margin: 0 0 16px;
	font-size: 36px;
	line-height: 1.15;
}

.faq-intro .text {
	margin: 0 0 24px;
	font: 400 15.5px/1.65 var(--font-body);
	color: #9aa9b8;
}

.faq-intro .btn {
	padding: 13px 20px;
}

.faq-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.faq-item {
	overflow: hidden;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 11px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .26);
	transition: background .25s ease, border-color .25s ease, border-left-width .25s ease, box-shadow .25s ease;
}

.faq-item.is-open {
	background: rgba(143, 203, 228, .09);
	border-color: rgba(143, 203, 228, .28);
	border-left: 4px solid var(--sky);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}

.faq-question {
	margin: 0;
	font: 700 18px var(--font-heading);
}

.faq-question button {
	transition: padding .35s ease;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 22px 26px;
	background: none;
	border: 0;
	font: inherit;
	color: #fff;
	text-align: left;
	cursor: pointer;
}

.faq-item.is-open .faq-question button {
	padding-bottom: 14px;
}

.faq-icon {
	flex: none;
}

.faq-icon .v {
	transition: opacity .2s ease;
}

.faq-item.is-open .faq-icon .v {
	opacity: 0;
}

/* Slide down / up: the row animates from 0fr to 1fr */
.faq-answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .35s ease;
}

.faq-item.is-open .faq-answer {
	grid-template-rows: 1fr;
}

.faq-answer-clip {
	min-height: 0;
	overflow: hidden;
}

.faq-answer-inner {
	padding: 0 26px 24px;
	font: 400 14.5px/1.7 var(--font-body);
	color: #9aa9b8;
	opacity: 0;
	transition: opacity .25s ease;
}

.faq-item.is-open .faq-answer-inner {
	opacity: 1;
	transition-delay: .08s;
}

/* =========================
   HOME SUPPORT
========================= */
.home-support {
	position: relative;
	overflow: hidden;
	padding: 70px 0 76px;
	border-top: 1px solid #cfe0e8;
	background-color: var(--mist);
	color: var(--ink);
}

.home-support .bg-halftone {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(var(--blue) 2.3px, transparent 2.5px);
	background-size: 16px 16px;
	opacity: .35;
	-webkit-mask: radial-gradient(140% 130% at 100% 100%, #000 14%, transparent 60%);
	mask: radial-gradient(140% 130% at 100% 100%, #000 14%, transparent 60%);
	pointer-events: none;
}

.home-support .section-head.split {
	margin-bottom: 32px;
}

.home-support .section-head h2 {
	font-size: 34px;
	letter-spacing: -.4px;
	color: var(--ink);
}

.support-link {
	font: 600 14.5px var(--font-body);
	color: var(--blue);
	transition: color .16s ease;
}

.support-link:hover {
	color: var(--orange);
}

.support-cards {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}

.support-card {
	position: relative;
	padding: 24px;
	background: #fff;
	border: 1px solid #cfe0e8;
	border-radius: 11px;
	box-shadow: 0 2px 12px rgba(31, 95, 168, .07);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.support-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(31, 95, 168, .15);
	border-color: var(--blue);
}

.support-card .card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 16px;
	border-radius: 10px;
	background: var(--mist);
	color: var(--blue);
}

.support-card h3 {
	margin: 0 0 5px;
	font: 700 18px var(--font-heading);
	line-height: 1.3;
	color: var(--ink);
}

.support-card h3 a {
	color: inherit;
}

.support-card p {
	margin: 0;
	font: 400 13.5px/1.5 var(--font-body);
	color: var(--slate);
}

/* =========================
   HOME CTA
========================= */
.home-cta {
	position: relative;
	overflow: hidden;
	padding: 88px 0 92px;
	background: linear-gradient(120deg, #1b2027, #1f2c3a 55%, #005f89 140%);
	color: #fff;
	text-align: center;
}

.home-cta .doc {
	position: absolute;
	width: 104px;
	height: 130px;
	border-radius: 7px;
	animation: ms-float 7s ease-in-out infinite;
	pointer-events: none;
}

.home-cta .doc-1 {
	left: 70px;
	top: 44px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .18);
	--r: -9deg;
}

.home-cta .doc-2 {
	left: 172px;
	top: 96px;
	background: rgba(143, 203, 228, .1);
	border: 1px solid rgba(143, 203, 228, .26);
	--r: 5deg;
	animation-delay: 1.4s;
}

.home-cta .doc-3 {
	right: 88px;
	top: 56px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .16);
	--r: 11deg;
	animation-delay: 2.8s;
}

.home-cta .doc-4 {
	right: 196px;
	bottom: 34px;
	background: rgba(143, 203, 228, .08);
	border: 1px solid rgba(143, 203, 228, .2);
	--r: -6deg;
	animation-delay: 4.2s;
}

.cta-content {
	position: relative;
	max-width: 620px;
	margin: 0 auto;
}

.cta-content .eyebrow {
	margin-bottom: 14px;
}

.cta-content h2 {
	margin: 0 0 16px;
	font-weight: 800;
	font-size: 42px;
	line-height: 1.12;
	letter-spacing: -.8px;
	color: #fff;
}

.cta-content .text {
	margin: 0 0 32px;
	font: 400 17px/1.6 var(--font-body);
	color: #c9d6e3;
}

.home-cta .btn.outline,
.home-faq .faq-intro .btn.outline {
	padding: 15px 20px;
	border-color: rgba(255, 255, 255, .4);
	color: #fff;
}

.home-cta .btn.outline:hover,
.home-cta .btn.outline:focus-visible,
.home-faq .faq-intro .btn.outline:hover,
.home-faq .faq-intro .btn.outline:focus-visible {
	background: rgba(255, 255, 255, .14);
	border-color: #fff;
	color: #fff;
}

/* =========================
   SERVICE HERO
   Values from service-detail-1b.html (1920px canvas).
========================= */
.service-hero {
	position: relative;
	overflow: hidden;
	padding: 70px 0 60px;
	background: linear-gradient(120deg, #171a20 0%, #1f2c3a 58%, #243748 100%);
	color: #eef1f5;
}

.service-hero .hero-photo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 1150px;
	max-width: 100%;
	-webkit-mask: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .5) 38%, #000 72%);
	mask: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .5) 38%, #000 72%);
}

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

.service-hero .hero-fade {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, #171a20 0%, rgba(28, 40, 53, .95) 32%, rgba(36, 55, 72, .45) 60%, transparent 80%);
	pointer-events: none;
}

.service-hero .glow {
	position: absolute;
	width: 560px;
	height: 560px;
	right: -140px;
	top: -200px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 95, 137, .32), transparent 68%);
	filter: blur(10px);
	pointer-events: none;
}

.service-hero .container {
	position: relative;
}

.service-hero .hero-content {
	max-width: 1040px;
}

.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	font: 400 13px var(--font-body);
	color: #9db3c4;
}

.breadcrumb li {
	display: flex;
	align-items: center;
	gap: 9px;
}

.breadcrumb li + li::before {
	content: '/';
	color: #5d6b78;
}

.breadcrumb a {
	color: #9db3c4;
	transition: color .15s ease;
}

.breadcrumb a:hover {
	color: var(--sky);
}

.breadcrumb [aria-current] {
	color: var(--sky);
}

.service-hero h1 {
	margin: 0 0 14px;
	font-size: 62px;
	line-height: 1.06;
	letter-spacing: -1.1px;
}

.service-hero .underline {
	display: block;
	margin: -6px 0 24px;
}

.service-hero .text {
	max-width: 620px;
	margin: 0 0 30px;
	font: 400 18px/1.62 var(--font-body);
	color: #c3ccd6;
}

.service-hero .btn-group {
	margin-bottom: 38px;
}

/* Industry pages: no "On this page" links, so the hero closes on the buttons */
.industry-hero {
	padding: 96px 0 104px;
}

.industry-hero .btn-group {
	margin-bottom: 0;
}

/* "On this page" jump links */
.page-links {
	display: inline-block;
	max-width: 1000px;
	padding: 20px 26px 22px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 10px;
	background: rgba(255, 255, 255, .04);
}

.page-links .eyebrow {
	margin-bottom: 12px;
	letter-spacing: 1.6px;
}

.page-links ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.page-links a {
	display: inline-flex;
	align-items: center;
	padding-bottom: 3px;
	border-bottom: 1.5px solid transparent;
	font: 600 14.5px var(--font-heading);
	color: #c3ccd6;
	transition: color .15s ease, border-color .15s ease;
}

.page-links a.is-active {
	color: #fff;
	border-color: var(--orange);
}

.page-links a:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, .45);
}

/* =========================
   INTRO — SERVICE LAYOUT (Overview)
========================= */
.home-intro.layout-service {
	padding: 84px 0;
	background: var(--mist);
	color: var(--ink);
}

.home-intro .bg-dots {
	position: absolute;
	right: 0;
	top: 60px;
	width: 1400px;
	max-width: 100%;
	height: 600px;
	background-image: radial-gradient(var(--blue) 2.2px, transparent 2.4px);
	background-size: 16px 16px;
	opacity: .13;
	pointer-events: none;
	-webkit-mask: radial-gradient(120% 120% at 100% 0, #000 20%, transparent 66%);
	mask: radial-gradient(120% 120% at 100% 0, #000 20%, transparent 66%);
}

.layout-service .intro-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 72px;
}

.layout-service .intro-content .eyebrow {
	color: var(--blue);
	letter-spacing: 1.6px;
}

.layout-service .intro-content h2 {
	max-width: 820px;
	margin: 0 0 20px;
	line-height: 1.16;
}

.layout-service .intro-content .text p,
.layout-service .intro-content .text p:last-child {
	max-width: 820px;
	margin: 0 0 18px;
	font: 400 16.5px/1.7 var(--font-body);
	color: #54595f;
}

.layout-service .intro-image .img-wrap {
	border: 1px solid #e2ded4;
	border-radius: 10px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .07);
}

.intro-stats {
	display: flex;
	max-width: 760px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #c3d5de;
}

.intro-stats li {
	flex: 1;
	padding: 22px 24px 0;
}

/* Intro award logos (About) */
.intro-awards {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.intro-awards .award-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 84px;
	padding: 12px 18px;
	background: #fff;
	border: 1px solid #d4e1e8;
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(31, 44, 58, .06);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.intro-awards a.award-badge:hover {
	transform: translateY(-2px);
	border-color: var(--sky);
	box-shadow: 0 10px 24px rgba(0, 95, 137, .14);
}

.intro-awards img {
	display: block;
	width: auto;
	max-width: 170px;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 480px) {
	.intro-awards .award-badge {
		height: 70px;
		padding: 10px 14px;
	}

	.intro-awards img {
		max-width: 130px;
	}
}

.intro-stats li:first-child {
	padding-left: 0;
}

.intro-stats li:last-child {
	padding-right: 0;
}

.intro-stats li + li {
	border-left: 1px solid #c3d5de;
}

.intro-stats .stat-number {
	font: 800 32px/1 var(--font-heading);
	color: var(--navy);
}

.intro-stats .stat-number.highlight {
	color: var(--orange);
}

.intro-stats .stat-label {
	margin-top: 5px;
	font: 600 12px var(--font-mono);
	letter-spacing: 1.1px;
	color: #5c7080;
}

/* =========================
   INDUSTRIES — SERVICE LAYOUT
========================= */
.home-industries.layout-service {
	padding: 84px 0 92px;
	background: linear-gradient(140deg, #1a1f26, #22303e 60%, #1d2833);
	color: #fff;
}

.home-industries.layout-service .glow {
	display: none;
}

.home-industries.layout-service .section-head.center {
	margin-bottom: 40px;
}

.home-industries.layout-service .eyebrow {
	margin-bottom: 12px;
	letter-spacing: 1.6px;
}

.home-industries.layout-service .section-head h2 {
	margin: 0 0 14px;
	line-height: 1.16;
}

.home-industries.layout-service .section-head .text {
	max-width: 760px;
	margin: 0 auto;
	font: 400 16px/1.65 var(--font-body);
	color: #a9b7c5;
}

/* Icon to the left of the title + text */
.layout-service .industry-card {
	display: grid;
	grid-template-columns: 26px 1fr;
	column-gap: 16px;
	align-content: start;
}

.layout-service .industry-card .icon {
	grid-row: 1 / span 2;
	margin: 2px 0 0;
}

.layout-service .industry-card h3,
.layout-service .industry-card p {
	grid-column: 2;
}

/* =========================
   TESTIMONIALS — CARDS LAYOUT
========================= */
.home-testimonials.layout-cards {
	padding: 84px 0 88px;
}

.home-testimonials .bg-dots {
	position: absolute;
	right: 60px;
	top: 50px;
	width: 260px;
	height: 260px;
	background-image: radial-gradient(var(--blue) 2.4px, transparent 2.6px);
	background-size: 18px 18px;
	opacity: .12;
	pointer-events: none;
}

.home-testimonials.layout-cards .section-head.center {
	margin-bottom: 38px;
}

.layout-cards .section-head .eyebrow {
	margin-bottom: 12px;
	letter-spacing: 1.6px;
}

.layout-cards .section-head h2 {
	line-height: 1.16;
}

.testimonial-cards {
	position: relative;
}

/* Swiper core (from swiper.css 14.3.0 — only what this slider uses) */
.swiper {
	position: relative;
	z-index: 1;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	overflow: hidden;
	list-style: none;
}

.swiper-wrapper {
	position: relative;
	z-index: 1;
	display: flex;
	width: 100%;
	height: 100%;
	box-sizing: content-box;
	transition-property: transform;
	transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
	transform: translate3d(0, 0, 0);
}

.swiper-horizontal {
	touch-action: pan-y;
}

.swiper-slide {
	position: relative;
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	transition-property: transform;
	display: block;
}

.swiper .swiper-notification {
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1000;
	opacity: 0;
	pointer-events: none;
}

/* Testimonial cards: 3 per view (2 tablet, 1 mobile), equal heights.
   clip-path instead of overflow keeps the hover lift + shadow visible above/below. */
.testimonial-cards .swiper {
	overflow: visible;
	clip-path: inset(-12px 0 -56px 0);
}

.testimonial-cards .swiper-slide {
	height: auto;
}

/* Before Swiper starts (or without JS) lay the first cards out like the slider */
.testimonial-cards .swiper:not(.swiper-initialized) .swiper-slide {
	width: calc((100% - 44px) / 3);
	margin-right: 22px;
}

.testimonial-card {
	position: relative;
	padding: 30px;
	background: #fff;
	border: 1px solid #e2ded4;
	border-radius: 13px;
	box-shadow: 0 3px 16px rgba(0, 0, 0, .055);
	color: var(--ink);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.testimonial-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(0, 0, 0, .11);
	border-color: var(--blue);
}

.testimonial-card .quote-mark {
	position: absolute;
	top: 18px;
	right: 24px;
	font: 800 62px/.7 var(--font-heading);
	color: rgba(0, 95, 137, .1);
}

.testimonial-card blockquote p {
	position: relative;
	margin: 0 0 22px;
	font: 400 15px/1.65 var(--font-body);
	color: #42474e;
}

.testimonial-card .author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.testimonial-card .avatar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--mist);
	border: 1px solid #cfe0e8;
	font: 700 14px var(--font-heading);
	color: var(--blue);
}

.testimonial-card .avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.testimonial-card .name {
	display: block;
	font: 700 14.5px var(--font-heading);
}

.testimonial-card .details {
	display: block;
	font: 400 12.5px var(--font-body);
	color: #7c848d;
}

.slider-dots {
	display: flex;
	justify-content: center;
	gap: 9px;
}

.slider-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	margin-top: 32px;
}

.slider-dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #d5d0c4;
	cursor: pointer;
	transition: background .15s ease;
}

.slider-dots button:hover {
	background: var(--orange);
}

.slider-dots button.is-active {
	background: var(--blue);
}

/* =========================
   STITCHED DIVIDER — LIGHT
========================= */
.stitched-divider.light {
	background: var(--mist);
}

.stitched-divider.light .container {
	height: 64px;
}

.stitched-divider.light .line {
	background: repeating-linear-gradient(90deg, #cfc7b6 0 8px, transparent 8px 16px);
}

/* =========================
   FAQ — eyebrow (Service pages)
========================= */
.faq-intro .eyebrow {
	margin-bottom: 12px;
	letter-spacing: 1.6px;
}

.service-single .faq-intro h2 {
	color: #fff;
}

/* =========================
   MORE SERVICES ("More under AI Services")
========================= */
.more-services {
	position: relative;
	padding: 70px 0 78px;
	background: #f4f1ea;
	border-top: 1px solid #e6e2d9;
	color: var(--ink);
}

.more-services .section-head.split {
	align-items: baseline;
	margin-bottom: 28px;
}

.more-services .eyebrow {
	letter-spacing: 1.6px;
}

.more-services h2 {
	font-size: 30px;
	line-height: normal;
	letter-spacing: -.4px;
}

.more-services .section-head .text-link {
	font: 600 14.5px var(--font-body);
	color: var(--blue);
}

.more-services .section-head .text-link:hover {
	gap: 8px;
	color: var(--orange);
}

/* Flex (not grid) so an incomplete last row is centred. */
.service-link-grid {
	--cols: 3;
	--gap: 18px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gap);
}

.service-link-grid > .service-link {
	flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
	min-width: 0;
}

/* Two items or fewer: 2 columns instead of leaving an empty third (mobile stays 1 column). */
@media (min-width: 768px) {
	.service-link-grid:not(:has(> .service-link:nth-child(3))) {
		--cols: 2;
	}
}

.service-link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 24px 26px;
	background: #fff;
	border: 1px solid #e2ded4;
	border-radius: 11px;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.service-link:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .09);
	border-color: var(--blue);
}

.service-link h3 {
	margin: 0 0 4px;
	font: 700 18px var(--font-heading);
}

.service-link h3 a {
	color: inherit;
}

.service-link p {
	margin: 0;
	font: 400 13.5px/1.5 var(--font-body);
	color: var(--slate);
}

.service-link .arrow {
	flex: none;
	width: 16px;
	height: 11px;
	color: var(--blue);
}

/* =========================
   FOOTER
========================= */
.site-footer {
	background: #15171c;
	color: #7d838c;
}

.footer-partners {
	border-bottom: 1px solid #26292f;
	text-align: center;
}

.footer-partners .container {
	padding-top: 30px;
	padding-bottom: 30px;
}

.partners-text {
	margin: 0 0 18px;
	font: 400 12.5px var(--font-body);
	color: #8a9099;
}

.partners {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.partner {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 24px;
	background: #fff;
	border-radius: 7px;
	transition: transform .18s ease, box-shadow .18s ease;
}

a.partner:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}

.partner img {
	display: block;
	width: auto;
	height: auto;
	max-width: 105px;
	max-height: 26px;
}

.footer-main .container {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
	gap: 32px;
	padding-top: 44px;
	padding-bottom: 44px;
}

.footer-logo img {
	display: block;
	width: auto;
	height: 28px;
	margin-bottom: 18px;
	opacity: .92;
}

.footer-brand address {
	max-width: 250px;
	margin: 0;
	font: 400 13.5px/1.7 var(--font-body);
	color: #7d838c;
}

.footer-brand address a {
	color: inherit;
}

.footer-brand address a:hover {
	color: var(--sky);
}

.footer-tagline {
	margin-top: 16px;
	font: 600 12.5px var(--font-mono);
	color: var(--sky);
}

.footer-tagline sup.reg {
	font-size: 9px;
}

.footer-col {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.footer-col-title {
	margin-bottom: 3px;
	font: 600 12.5px var(--font-mono);
	letter-spacing: .8px;
	text-transform: uppercase;
	color: #e7ecf2;
}

.footer-menu {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-menu a {
	display: block;
	font: 400 13.5px var(--font-body);
	color: #7d838c;
	transition: color .15s ease;
}

.footer-menu a:hover {
	color: var(--sky);
}

.footer-bottom {
	border-top: 1px solid #26292f;
}

.footer-bottom .container {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	font: 400 12.5px var(--font-body);
	color: #61666d;
}

.footer-bottom .copyright {
	margin: 0;
}

.legal-menu {
	display: flex;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.legal-menu a {
	color: #61666d;
	transition: color .15s ease;
}

.legal-menu a:hover {
	color: var(--sky);
}

.footer-bottom-end {
	display: flex;
	align-items: center;
	gap: 22px;
}

.footer-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--blue);
	color: #fff;
	box-shadow: 0 3px 14px rgba(0, 95, 137, .3);
	transition: background .15s ease, transform .15s ease;
}

.footer-social:hover,
.footer-social:focus-visible {
	background: var(--blue-dark);
	color: #fff;
	transform: translateY(-2px);
}

/* =========================
   INNER PAGES (basic)
========================= */
.site-main:not(.home-page) {
	max-width: 1920px;
	margin: 0 auto;
	padding: 72px var(--gutter);
	background: #fbfaf7;
	color: var(--ink);
}

.site-main:not(.home-page) .entry-content p,
.site-main:not(.home-page) .entry-content li {
	font-size: 16px;
	line-height: 1.68;
	color: var(--slate);
}

.site-main:not(.home-page) .entry-title {
	margin-bottom: 24px;
	font-size: 44px;
	line-height: 1.12;
}

/* =========================
   ANIMATIONS
========================= */
@keyframes ms-pulse {
	0%, 100% { opacity: .3; }
	50% { opacity: 1; }
}

@keyframes ms-float {
	0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
	50% { transform: translateY(-13px) rotate(var(--r, 0deg)); }
}

/* Sweep takes the first 60% of the cycle, then rests off-button */
@keyframes ms-sheen {
	0% { transform: translateX(-130%) skewX(-18deg); }
	60%, 100% { transform: translateX(260%) skewX(-18deg); }
}

@keyframes ms-flow {
	0% { stroke-dashoffset: 300; opacity: 0; }
	15% { opacity: 1; }
	90% { opacity: 1; }
	100% { stroke-dashoffset: -40; opacity: 0; }
}

@keyframes ms-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* =========================
   RESPONSIVE
========================= */

/* ---------- Large laptop (≤1600px) ---------- */
@media (max-width: 1600px) {
	:root {
		--gutter: 64px;
	}

	.main-bar .container {
		gap: 24px;
	}

	.main-navigation .menu {
		gap: 20px;
	}
}

/* ---------- Laptop (≤1439px) ---------- */
@media (max-width: 1439px) {
	:root {
		--gutter: 48px;
	}

	.main-navigation .menu {
		gap: 16px;
	}

	.main-navigation .menu > li > a {
		font-size: 14px;
	}

	h1 {
		font-size: 60px;
	}

	.hero-panel {
		width: 470px;
	}

	.intro-image {
		width: 520px;
	}

	.intro-image .img-wrap {
		height: 360px;
	}

	.support-cards {
		grid-template-columns: repeat(5, 1fr);
		gap: 14px;
	}

	.support-card {
		padding: 20px;
	}
}

/* ---------- Narrow desktop (1200–1365px): keep the logo, menu and header button on one line, inside the screen ---------- */
@media (min-width: 1200px) and (max-width: 1365px) {
	.utility-bar .container,
	.main-bar .container {
		padding-left: 24px;
		padding-right: 24px;
	}

	.main-bar .container {
		gap: 20px;
	}

	.site-logo img {
		height: 28px;
	}

	.main-navigation .menu {
		gap: 8px;
	}

	.main-navigation .menu > li > a {
		font-size: 14px;
	}
}

/* ---------- Tablet landscape (≤1199px) ---------- */
@media (max-width: 1199px) {
	:root {
		--gutter: 40px;
		--main-bar-height: 70px;
	}

	/* Mobile navigation */
	.main-bar .container {
		gap: 16px;
	}

	.site-logo {
		margin-right: auto;
	}

	.menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		margin-right: -8px;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 6px;
		color: #fff;
		cursor: pointer;
	}

	.menu-toggle .bars {
		position: relative;
		display: block;
		width: 24px;
		height: 16px;
	}

	.menu-toggle .bars span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		transition: transform .2s ease, opacity .2s ease, top .2s ease;
	}

	.menu-toggle .bars span:nth-child(1) { top: 0; }
	.menu-toggle .bars span:nth-child(2) { top: 7px; }
	.menu-toggle .bars span:nth-child(3) { top: 14px; }

	.menu-open .menu-toggle .bars span:nth-child(1) {
		top: 7px;
		transform: rotate(45deg);
	}

	.menu-open .menu-toggle .bars span:nth-child(2) {
		opacity: 0;
	}

	.menu-open .menu-toggle .bars span:nth-child(3) {
		top: 7px;
		transform: rotate(-45deg);
	}

	.main-navigation {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		max-height: calc(100vh - 108px);
		overflow-y: auto;
		background: var(--navy);
		border-top: 1px solid #2c3d4e;
		box-shadow: 0 18px 30px rgba(0, 0, 0, .35);
	}

	.menu-open .main-navigation {
		display: flex;
	}

	.main-navigation .menu {
		flex-direction: column;
		gap: 0;
	}

	.main-navigation .menu > li {
		flex-direction: column;
		border-bottom: 1px solid #2c3d4e;
	}

	.main-navigation .menu > li > a {
		padding: 15px var(--gutter);
		font-size: 16px;
	}

	.main-navigation .menu > .current-menu-item > a,
	.main-navigation .menu > .current-menu-ancestor > a {
		box-shadow: inset 3px 0 0 var(--sky);
	}

	.main-navigation .menu > li > a:hover,
	.main-navigation .menu > li:focus-within > a {
		box-shadow: inset 3px 0 0 var(--orange);
	}

	/* Submenus: the link still navigates; the angle button opens the list. */
	.main-navigation .menu > .menu-item-has-children {
		flex-flow: row wrap;
	}

	.main-navigation .menu > .menu-item-has-children > a {
		flex: 1;
		padding-right: 0;
	}

	.submenu-toggle {
		position: static;
		justify-content: flex-end;
		width: calc(var(--gutter) + 44px); /* large tap target, icon aligned to the gutter */
		padding-right: var(--gutter);
	}

	.submenu-toggle .angle {
		width: 12px;
		height: 8px;
	}

	/* Hover must not flip the icon on touch; only the open state does. */
	.main-navigation li:hover > .submenu-toggle .angle,
	.main-navigation li:focus-within > .submenu-toggle .angle {
		transform: none;
	}

	.main-navigation li.is-open > .submenu-toggle .angle {
		transform: rotate(180deg);
	}

	.main-navigation .sub-menu,
	.main-navigation li:hover > .sub-menu,
	.main-navigation li:focus-within > .sub-menu {
		position: static;
		display: none;
		flex-basis: 100%;
		min-width: 0;
		padding: 0 0 10px;
		background: none;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}

	.main-navigation li.is-open > .sub-menu {
		display: block;
	}

	.main-navigation .sub-menu a {
		padding: 10px var(--gutter) 10px calc(var(--gutter) + 16px);
		font-size: 15px;
		white-space: normal;
	}

	/* Nested levels: indent further, open with their own angle button. */
	.main-navigation .sub-menu .menu-item-has-children {
		display: flex;
		flex-flow: row wrap;
	}

	.main-navigation .sub-menu .menu-item-has-children > a {
		flex: 1;
		padding-right: 0;
	}

	.main-navigation .sub-menu .sub-menu,
	.main-navigation .sub-menu .sub-menu.flip,
	.main-navigation .sub-menu li:hover > .sub-menu,
	.main-navigation .sub-menu li:focus-within > .sub-menu {
		top: auto;
		left: auto;
		right: auto;
		padding-bottom: 4px;
		border: 0;
		border-radius: 0;
		transform: none;
	}

	.main-navigation .sub-menu .sub-menu a {
		padding-left: calc(var(--gutter) + 32px);
	}

	.main-navigation .sub-menu .sub-menu .sub-menu a {
		padding-left: calc(var(--gutter) + 48px);
	}

	.main-navigation .sub-menu .submenu-toggle .angle,
	.main-navigation .sub-menu li:hover > .submenu-toggle .angle,
	.main-navigation .sub-menu li:focus-within > .submenu-toggle .angle {
		transform: none;
	}

	.main-navigation .sub-menu li.is-open > .submenu-toggle .angle {
		transform: rotate(180deg);
	}

	.main-navigation .mobile-extras {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		padding: 20px var(--gutter) 26px;
	}

	.mobile-utility {
		display: flex;
		flex-wrap: wrap;
		gap: 10px 24px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.mobile-utility a {
		font: 600 14px var(--font-body);
		color: #aebbc7;
	}

	.mobile-utility a:hover {
		color: #fff;
	}

	.main-navigation .mobile-extras .btn {
		display: none;
	}

	/* Hero — text and panel stay side by side until 1025px */
	h1 {
		font-size: 52px;
	}

	.hero-row {
		gap: 40px;
		padding: 72px 0 48px;
	}

	.hero-panel {
		width: 440px;
	}

	.panel-item {
		gap: 16px;
		padding: 14px 18px;
	}

	.panel-item .icon {
		width: 34px;
		height: 34px;
	}

	.panel-item .item-text {
		font-size: 14px;
	}

	/* Intro */
	.intro-row {
		gap: 48px;
	}

	.intro-image {
		width: 440px;
	}

	.intro-image .img-wrap {
		height: 320px;
	}

	/* Industries */
	.industry-cards {
		--cols: 2;
	}

	/* Testimonials */
	.testimonial-box {
		grid-template-columns: 1fr;
	}

	.testimonial-box .featured {
		border-right: 0;
		border-bottom: 1px solid #e6ecef;
	}

	.testimonial-box .slide blockquote p {
		max-width: none;
	}

	.review-stats {
		flex: none;
	}

	/* Support — centered rows so the last row sits in the middle */
	.support-cards {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.support-card {
		flex: 0 0 calc((100% - 32px) / 3);
	}

	/* CTA */
	.home-cta .doc-2 {
		left: 120px;
	}

	.home-cta .doc-4 {
		right: 120px;
	}

	/* Footer */
	.footer-main .container {
		grid-template-columns: repeat(4, 1fr);
		row-gap: 36px;
	}

	.footer-brand {
		grid-column: 1 / -1;
	}

	.footer-brand address {
		max-width: none;
	}
}

/* ---------- Tablet (≤1024px): hero stacks, panel full width ---------- */
@media (max-width: 1024px) {
	.hero-row {
		flex-direction: column;
		align-items: stretch;
		gap: 44px;
	}

	.hero-content,
	.hero-content .text {
		max-width: 100%;
	}

	.hero-panel {
		width: 100%;
		height: 360px;
	}

	.hero-mesh {
		left: -70%;
		height: auto;
	}
}

/* ---------- Tablet portrait (≤991px) ---------- */
@media (max-width: 991px) {
	:root {
		--gutter: 32px;
	}

	.utility-bar .tagline {
		display: none;
	}

	.utility-bar .container,
	.utility-nav .menu {
		gap: 20px;
	}

	.home-services .section-head h2,
	.home-industries .section-head h2,
	.home-testimonials .section-head h2,
	.home-support .section-head h2 {
		line-height: 1.2;
	}

	h2,
	.faq-intro h2 {
		font-size: 34px;
	}

	.cta-content h2 {
		font-size: 38px;
	}

	/* Path cards */
	.home-paths {
		grid-template-columns: 1fr;
	}

	.path-card.blue {
		border-right: 0;
		border-bottom: 1px solid #cfe0e8;
	}

	/* Intro */
	.home-intro {
		padding: 72px 0 76px;
	}

	.intro-row {
		flex-direction: column;
		align-items: stretch;
	}

	.intro-image {
		width: 100%;
	}

	.intro-image .img-wrap {
		height: auto;
		aspect-ratio: 3 / 2;
	}

	.home-intro .contours {
		-webkit-mask: linear-gradient(180deg, transparent 0 30%, #000 70%);
		mask: linear-gradient(180deg, transparent 0 30%, #000 70%);
	}

	/* Services */
	.home-services {
		padding: 68px 0 72px;
	}

	.service-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.service-cards .service-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	/* Industries / Testimonials / Support */
	.home-industries,
	.home-testimonials {
		padding: 64px 0 68px;
	}

	.home-support {
		padding: 60px 0 64px;
	}

	/* FAQ */
	.faq-row {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.home-faq {
		padding-bottom: 72px;
	}

	/* CTA */
	.home-cta {
		padding: 76px 0 80px;
	}

	.home-cta .doc-1 {
		left: -30px;
	}

	.home-cta .doc-2 {
		left: 40px;
		top: auto;
		bottom: 24px;
	}

	.home-cta .doc-3 {
		right: -30px;
	}

	.home-cta .doc-4 {
		display: none;
	}
}

/* ---------- Mobile (≤767px) ---------- */
@media (max-width: 767px) {
	:root {
		--gutter: 20px;
		--utility-height: 36px;
		--main-bar-height: 64px;
	}

	/* Header */
	.utility-bar .container {
		gap: 16px;
	}

	.utility-bar .tagline,
	.utility-bar .divider,
	.utility-nav {
		display: none;
	}

	.utility-bar .spacer {
		display: none;
	}

	.utility-bar .phone {
		margin-left: auto;
		font-weight: 600;
		color: #e7ecf2;
	}

	.site-logo img {
		height: 26px;
	}

	.header-cta {
		display: none;
	}

	.main-navigation .mobile-extras .btn {
		display: inline-flex;
	}

	/* Typography */
	h1 {
		font-size: 42px;
		letter-spacing: -.8px;
	}

	h2,
	.faq-intro h2 {
		font-size: 30px;
	}

	.home-support .section-head h2 {
		font-size: 28px;
	}

	.cta-content h2 {
		font-size: 32px;
	}

	/* Hero */
	.hero-mesh {
		opacity: .3;
		left: -120%;
	}

	.hero-row {
		gap: 36px;
		padding: 52px 0 40px;
	}

	.hero-underline {
		width: 220px;
		height: 16px;
	}

	.hero-content .text {
		font-size: 16px;
		margin-bottom: 28px;
	}

	.hero-panel {
		height: auto;
		padding: 22px 18px 18px;
	}

	.hero-panel .eyebrow {
		position: static;
		margin-bottom: 14px;
	}

	.panel-items {
		position: static;
	}

	.panel-item {
		gap: 14px;
		padding: 14px 16px;
	}

	.panel-item .icon {
		width: 32px;
		height: 32px;
	}

	.panel-item .item-title {
		font-size: 18px;
	}

	.panel-item .item-text {
		font-size: 13.5px;
	}

	.home-hero .container {
		padding-bottom: 48px;
	}

	.hero-stats {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.hero-stats .stat,
	.hero-stats .stat:first-child,
	.hero-stats .stat:last-child {
		padding: 20px 16px 20px 0;
		border-left: 0;
	}

	.hero-stats .stat:nth-child(even) {
		padding-left: 16px;
		border-left: 1px solid rgba(255, 255, 255, .18);
	}

	.hero-stats .stat:nth-child(n+3) {
		border-top: 1px solid rgba(255, 255, 255, .18);
	}

	.hero-stats .stat-number {
		font-size: 30px;
	}

	.hero-stats .stat-label {
		font-size: 11px;
		letter-spacing: .8px;
	}

	/* Path cards */
	.path-card {
		padding: 28px var(--gutter);
	}

	.path-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	/* Intro */
	.home-intro {
		padding: 56px 0 60px;
	}

	.intro-row {
		gap: 36px;
	}

	/* Section heads */
	.section-head.center {
		margin-bottom: 32px;
	}

	.section-head.split {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
		margin-bottom: 28px;
	}

	/* Services */
	.home-services {
		padding: 56px 0 60px;
	}

	.service-cards {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.service-card {
		padding: 24px;
	}

	.service-card .card-image {
		height: 200px;
		margin: -24px -24px 22px;
	}

	/* Industries */
	.home-industries,
	.home-testimonials {
		padding: 56px 0 60px;
	}

	.industry-cards {
		--gap: 12px;
	}

	/* Testimonials */
	.testimonial-box .featured {
		padding: 36px 22px 32px;
	}

	.testimonial-box .quote-mark {
		left: 12px;
		font-size: 150px;
	}

	.testimonial-box .slide blockquote p {
		margin-bottom: 26px;
		font-size: 22px;
		line-height: 1.45;
	}

	.testimonial-box .author {
		padding-right: 0;
	}

	.slider-controls {
		position: static;
		justify-content: flex-end;
		margin-top: 20px;
	}

	.side-review {
		padding: 26px 22px;
	}

	.review-stats li {
		padding: 24px 10px;
	}

	.review-stats .stat-number {
		font-size: 26px;
	}

	.review-stats .stat-label {
		font-size: 10.5px;
		letter-spacing: .6px;
	}

	/* FAQ */
	.stitched-divider .container {
		height: 56px;
	}

	.home-faq {
		padding-bottom: 60px;
	}

	.faq-question {
		font-size: 17px;
	}

	.faq-question button {
		padding: 18px 20px;
	}

	.faq-item.is-open .faq-question button {
		padding-bottom: 12px;
	}

	.faq-answer-inner {
		padding: 0 20px 20px;
	}

	/* Support */
	.home-support {
		padding: 52px 0 56px;
	}

	.support-cards {
		gap: 12px;
	}

	.support-card {
		flex-basis: calc((100% - 12px) / 2);
	}

	.support-card {
		padding: 20px 18px;
	}

	/* CTA */
	.home-cta {
		padding: 64px 0 68px;
	}

	.home-cta .doc {
		width: 78px;
		height: 98px;
		opacity: .7;
	}

	.home-cta .doc-1 {
		left: -34px;
		top: 24px;
	}

	.home-cta .doc-2 {
		display: none;
	}

	.home-cta .doc-3 {
		right: -34px;
		top: 24px;
	}

	.cta-content .text {
		font-size: 16px;
		margin-bottom: 28px;
	}

	/* Footer */
	.partners {
		gap: 12px;
	}

	.partner {
		height: 46px;
		padding: 0 18px;
	}

	.partner img {
		max-width: 96px;
		max-height: 22px;
	}

	.footer-main .container {
		grid-template-columns: 1fr 1fr;
		gap: 32px 20px;
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.footer-bottom .container {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.footer-bottom-end {
		flex-wrap: wrap;
		gap: 12px 22px;
	}

	.legal-menu {
		flex-wrap: wrap;
		gap: 10px 22px;
	}
}

/* ---------- Small mobile (≤480px) ---------- */
@media (max-width: 480px) {
	:root {
		--gutter: 16px;
	}

	h1 {
		font-size: 36px;
	}

	h2,
	.faq-intro h2 {
		font-size: 28px;
	}

	.cta-content h2 {
		font-size: 30px;
	}

	.btn-group {
		flex-direction: column;
		align-items: stretch;
	}

	.btn-group .btn {
		width: 100%;
	}

	.panel-item .item-text {
		font-size: 13px;
	}

	.industry-cards {
		--cols: 1;
	}

	.support-card {
		flex-basis: 100%;
	}

	.testimonial-box .author .details {
		font-size: 11px;
	}

	.review-stats {
		grid-template-columns: 1fr;
	}

	.review-stats li {
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .14);
	}

	.review-stats li:last-child {
		border-bottom: 0;
	}
}

/* =========================
   SERVICE PAGES — RESPONSIVE
   (kept together so the service variations never touch homepage rules)
========================= */
@media (max-width: 1600px) {
	.service-hero .hero-photo {
		width: 72%;
	}
}

@media (max-width: 1439px) {
	.service-hero h1 {
		font-size: 56px;
	}

	.layout-service .intro-row {
		gap: 56px;
	}
}

@media (max-width: 1199px) {
	.service-hero h1 {
		font-size: 48px;
	}

	.layout-service .intro-row {
		gap: 48px;
	}

	.testimonial-cards .swiper:not(.swiper-initialized) .swiper-slide {
		width: calc((100% - 22px) / 2);
	}

	.service-link-grid {
		--cols: 2;
	}
}

@media (max-width: 991px) {
	.service-hero {
		padding: 56px 0 52px;
	}

	.industry-hero {
		padding: 68px 0 72px;
	}

	.service-hero .hero-photo {
		width: 100%;
		opacity: .55;
	}

	.home-intro.layout-service {
		padding: 64px 0;
	}

	.layout-service .intro-row {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.layout-service .intro-content h2,
	.layout-service .intro-content .text p,
	.intro-stats {
		max-width: none;
	}

	.home-industries.layout-service,
	.home-testimonials.layout-cards {
		padding: 64px 0 68px;
	}

	.home-industries.layout-service .section-head h2,
	.layout-cards .section-head h2 {
		font-size: 34px;
	}

	.more-services {
		padding: 56px 0 64px;
	}
}

@media (max-width: 767px) {
	.service-hero {
		padding: 44px 0 44px;
	}

	.industry-hero {
		padding: 52px 0 56px;
	}

	.service-hero h1 {
		font-size: 40px;
		letter-spacing: -.8px;
	}

	.service-hero .text {
		font-size: 16px;
		margin-bottom: 26px;
	}

	.service-hero .btn-group {
		margin-bottom: 30px;
	}

	.page-links {
		display: block;
		padding: 18px 18px 20px;
	}

	.page-links ul {
		gap: 10px 18px;
	}

	.home-intro.layout-service {
		padding: 56px 0 60px;
	}

	.layout-service .intro-row {
		gap: 32px;
	}

	.layout-service .intro-content h2 {
		font-size: 30px;
	}

	.layout-service .intro-content .text p,
	.layout-service .intro-content .text p:last-child {
		font-size: 15.5px;
	}

	.intro-stats li {
		padding: 18px 14px 0;
	}

	.intro-stats .stat-number {
		font-size: 26px;
	}

	.intro-stats .stat-label {
		font-size: 10.5px;
		letter-spacing: .8px;
	}

	.home-industries.layout-service,
	.home-testimonials.layout-cards {
		padding: 56px 0 60px;
	}

	.home-industries.layout-service .section-head h2,
	.layout-cards .section-head h2 {
		font-size: 30px;
	}

	.home-testimonials .bg-dots {
		right: 0;
		top: 20px;
		width: 160px;
		height: 160px;
	}

	.testimonial-cards .swiper:not(.swiper-initialized) .swiper-slide {
		width: 100%;
		margin-right: 14px;
	}

	.testimonial-card {
		padding: 26px 24px;
	}

	.stitched-divider.light .container {
		height: 52px;
	}

	.more-services .section-head.split {
		align-items: flex-start;
		gap: 14px;
	}

	.more-services h2 {
		font-size: 26px;
	}

	.service-link-grid {
		--cols: 1;
		--gap: 12px;
	}

	.service-link {
		padding: 20px 22px;
	}
}

@media (max-width: 480px) {
	.service-hero h1 {
		font-size: 34px;
	}

	.intro-stats li {
		padding: 16px 10px 0;
	}

	.intro-stats .stat-number {
		font-size: 22px;
	}
}

/* =========================
   INDUSTRY + SUPPORT PAGES — SECTION COLOURS
   Scoped to body.industry-page (Industries + its child pages) and body.support-page (Support + its child pages)
   so service and home pages keep their own palette.
   Rhythm: dark hero → white → mist → white → dark FAQ → mist → dark CTA.
========================= */
.industry-page .home-intro.layout-service,
.support-page .home-intro.layout-service {
	background: #fff;
}

.industry-page .more-services {
	background: var(--mist);
	border-top-color: #d6e4ea;
}

.industry-page .service-link {
	border-color: #d6e4ea;
}

.industry-page .home-testimonials,
.support-page .home-testimonials {
	background-color: #fff;
}

.industry-page .home-industries.layout-service,
.support-page .home-industries.layout-service {
	background: var(--mist);
	color: var(--ink);
}

.industry-page .home-industries.layout-service .eyebrow,
.support-page .home-industries.layout-service .eyebrow {
	color: var(--blue);
}

.industry-page .home-industries .section-head h2,
.support-page .home-industries .section-head h2 {
	color: var(--ink);
}

.industry-page .home-industries.layout-service .section-head .text,
.support-page .home-industries.layout-service .section-head .text {
	color: var(--slate);
}

.industry-page .industry-card,
.support-page .industry-card {
	background: #fff;
	border-color: #d6e4ea;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.industry-page .industry-card:hover,
.support-page .industry-card:hover {
	background: #fff;
	border-color: var(--blue);
	box-shadow: 0 8px 24px rgba(0, 95, 137, .12);
}

.industry-page .industry-card .icon,
.support-page .industry-card .icon {
	color: var(--blue);
}

.industry-page .industry-card h3,
.support-page .industry-card h3 {
	color: var(--ink);
}

.industry-page .industry-card p,
.support-page .industry-card p {
	color: var(--slate);
}

/* =========================
   STATEMENT SECTION
   Centred eyebrow + heading + short text + optional button. Dark (default) or Light.
========================= */
.statement-section {
	position: relative;
	overflow: hidden;
	padding: 92px 0 96px;
	background: linear-gradient(120deg, #171a20 0%, #1f2c3a 58%, #243748 100%);
	color: #fff;
	text-align: center;
}

.statement-section .glow {
	position: absolute;
	width: 520px;
	height: 520px;
	left: 50%;
	top: -300px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 95, 137, .38), transparent 68%);
	filter: blur(10px);
	pointer-events: none;
}

.statement-section .container {
	position: relative;
}

.statement-inner {
	max-width: 820px;
	margin: 0 auto;
}

.statement-section .eyebrow {
	margin-bottom: 14px;
	letter-spacing: 1.6px;
}

.statement-section h2 {
	margin: 0;
	font-size: 44px;
	line-height: 1.12;
	letter-spacing: -.6px;
	color: inherit;
}

.statement-section .underline {
	display: block;
	margin: 6px auto 22px;
}

.statement-section .text {
	margin: 0 auto;
	max-width: 680px;
	font: 400 18px/1.65 var(--font-body);
	color: #c3ccd6;
}

.statement-section .btn {
	margin-top: 32px;
}

.statement-section.light {
	background: #fff;
	color: var(--ink);
}

.statement-section.light .glow {
	display: none;
}

.statement-section.light .text {
	color: var(--slate);
}

@media (max-width: 991px) {
	.statement-section {
		padding: 68px 0 72px;
	}

	.statement-section h2 {
		font-size: 36px;
	}
}

@media (max-width: 767px) {
	.statement-section {
		padding: 52px 0 56px;
	}

	.statement-section h2 {
		font-size: 30px;
	}

	.statement-section .text {
		font-size: 16px;
	}
}

/* =========================
   INDUSTRIES LISTING PAGE
   Section order follows the content sheet, so the colours are re-balanced to keep light/dark alternating:
   dark hero → white overview → mist industries → dark statement → white services → mist testimonials → white FAQ → dark CTA.
========================= */
.industries-listing .more-services {
	background: #fff;
}

.industries-listing .home-testimonials {
	background-color: var(--mist);
}

.industries-listing .home-faq,
.support-page .home-faq:has(+ .home-cta) {
	padding: 84px 0 92px;
	background: #fff;
	border-top: 1px solid #d6e4ea;
	color: var(--ink);
}

.industries-listing .faq-intro .eyebrow,
.support-page .home-faq:has(+ .home-cta) .faq-intro .eyebrow {
	color: var(--blue);
}

.industries-listing .faq-intro h2,
.support-page .home-faq:has(+ .home-cta) .faq-intro h2 {
	color: var(--ink);
}

.industries-listing .faq-intro .text,
.support-page .home-faq:has(+ .home-cta) .faq-intro .text,
.industries-listing .faq-answer-inner,
.support-page .home-faq:has(+ .home-cta) .faq-answer-inner {
	color: var(--slate);
}

.industries-listing .faq-intro .btn.outline,
.support-page .home-faq:has(+ .home-cta) .faq-intro .btn.outline {
	border-color: var(--blue);
	color: var(--blue);
}

.industries-listing .faq-intro .btn.outline:hover,
.support-page .home-faq:has(+ .home-cta) .faq-intro .btn.outline:hover,
.industries-listing .faq-intro .btn.outline:focus-visible,
.support-page .home-faq:has(+ .home-cta) .faq-intro .btn.outline:focus-visible {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}

.industries-listing .faq-item,
.support-page .home-faq:has(+ .home-cta) .faq-item {
	background: #fff;
	border-color: #d6e4ea;
	box-shadow: 0 3px 12px rgba(0, 0, 0, .04);
}

.industries-listing .faq-item.is-open,
.support-page .home-faq:has(+ .home-cta) .faq-item.is-open {
	background: var(--mist);
	border-color: #c4dbe5;
	border-left-color: var(--blue);
	box-shadow: 0 6px 18px rgba(0, 95, 137, .08);
}

.industries-listing .faq-question button,
.support-page .home-faq:has(+ .home-cta) .faq-question button {
	color: var(--ink);
}

.industries-listing .faq-icon path,
.support-page .home-faq:has(+ .home-cta) .faq-icon path {
	stroke: var(--blue);
}

@media (max-width: 991px) {
	.industries-listing .home-faq,
	.support-page .home-faq:has(+ .home-cta) {
		padding: 64px 0 68px;
	}
}

@media (max-width: 767px) {
	.industries-listing .home-faq,
	.support-page .home-faq:has(+ .home-cta) {
		padding: 52px 0 56px;
	}
}

/* Support pages: a FAQ that runs straight into the CTA sits on mist with white cards. */
.support-page .home-faq:has(+ .home-cta) {
	background: var(--mist);
	border-top-color: #d6e4ea;
}

.support-page .home-faq:has(+ .home-cta) .faq-item.is-open {
	background: #fff;
}

/* =========================
   LINK CARDS
   Same card design as the Services Section (.home-services / .service-card); cards are entered by hand.
========================= */
.link-cards .service-card h3 {
	margin-top: 0;
}

/* =========================
   STATS BAND
   Big numbers + promise points on the dark navy band used by the hero/statement.
========================= */
.stats-band {
	position: relative;
	overflow: hidden;
	padding: 84px 0 88px;
	background: linear-gradient(120deg, #171a20 0%, #1f2c3a 58%, #243748 100%);
	color: #fff;
}

.stats-band .glow {
	position: absolute;
	width: 520px;
	height: 520px;
	right: -160px;
	top: -260px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 95, 137, .36), transparent 68%);
	filter: blur(10px);
	pointer-events: none;
}

.stats-band .container {
	position: relative;
}

.stats-band .section-head.center {
	margin-bottom: 44px;
}

.stats-band .eyebrow {
	margin-bottom: 12px;
	letter-spacing: 1.6px;
}

.stats-band h2 {
	margin: 0;
	line-height: 1.16;
	color: #fff;
}

.stats-band .section-head .text {
	max-width: 640px;
	margin: 14px auto 0;
	font: 400 16px/1.65 var(--font-body);
	color: #a9b7c5;
}

.band-stats {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, .14);
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.band-stats li {
	flex: 1;
	max-width: 360px;
	padding: 34px 28px;
	text-align: center;
}

.band-stats li + li {
	border-left: 1px solid rgba(255, 255, 255, .14);
}

.band-number {
	font: 800 54px/1 var(--font-heading);
	letter-spacing: -1px;
	color: #fff;
}

.band-stats li:first-child .band-number {
	color: var(--orange);
}

.band-label {
	margin-top: 10px;
	font: 600 12.5px/1.5 var(--font-mono);
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--sky);
}

.band-points {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 40px;
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
}

.band-points li {
	display: flex;
	align-items: center;
	gap: 10px;
	font: 600 16px/1.4 var(--font-body);
	color: #dfe6ed;
}

.band-points svg {
	flex: none;
}

@media (max-width: 991px) {
	.stats-band {
		padding: 64px 0 68px;
	}

	.band-number {
		font-size: 42px;
	}

	.band-stats li {
		padding: 28px 18px;
	}
}

@media (max-width: 767px) {
	.stats-band {
		padding: 52px 0 56px;
	}

	.band-stats {
		flex-direction: column;
		border-bottom: 0;
	}

	.band-stats li {
		max-width: none;
		padding: 24px 0;
		border-bottom: 1px solid rgba(255, 255, 255, .14);
	}

	.band-stats li + li {
		border-left: 0;
	}

	.band-points {
		flex-direction: column;
		align-items: flex-start;
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Support pages have no "On this page" links, so the hero closes on the buttons (same spacing as .industry-hero). */
.support-page .service-hero {
	padding: 96px 0 104px;
}

.support-page .service-hero .btn-group {
	margin-bottom: 0;
}

@media (max-width: 991px) {
	.support-page .service-hero {
		padding: 68px 0 72px;
	}
}

@media (max-width: 767px) {
	.support-page .service-hero {
		padding: 52px 0 56px;
	}
}

/* =========================
   RESOURCES SECTION
   Image beside a list of resources (title, text, links) with optional small print. New layout — only used where added.
========================= */
.resources-section {
	position: relative;
	overflow: hidden;
	padding: 88px 0 92px;
	background: #fff;
	color: var(--ink);
}

.resources-section .bg-dots {
	position: absolute;
	right: 0;
	top: 40px;
	width: 420px;
	height: 320px;
	background-image: radial-gradient(var(--blue) 2.2px, transparent 2.4px);
	background-size: 16px 16px;
	opacity: .1;
	pointer-events: none;
	-webkit-mask: radial-gradient(120% 120% at 100% 0, #000 20%, transparent 66%);
	mask: radial-gradient(120% 120% at 100% 0, #000 20%, transparent 66%);
}

.resources-section .container {
	position: relative;
}

.resources-row {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 72px;
	align-items: center;
}

.resources-section.no-image .resources-row {
	grid-template-columns: minmax(0, 1fr);
	max-width: 880px;
	margin: 0 auto;
}

.resources-image .img-wrap {
	overflow: hidden;
	border: 1px solid #e2ded4;
	border-radius: 12px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .07);
}

.resources-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.resources-content .eyebrow {
	margin-bottom: 12px;
	letter-spacing: 1.6px;
}

.resources-content h2 {
	margin: 0 0 24px;
	line-height: 1.16;
	color: var(--ink);
}

.resources-content > .text {
	margin: 0 0 28px;
	font: 400 16.5px/1.7 var(--font-body);
	color: #54595f;
}

.resource-items {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.resource-item {
	display: flex;
	gap: 18px;
	padding: 24px 26px;
	border: 1px solid #d6e4ea;
	border-left: 4px solid var(--blue);
	border-radius: 11px;
	background: #fff;
	box-shadow: 0 3px 14px rgba(0, 0, 0, .04);
	transition: box-shadow .2s ease, transform .2s ease;
}

.resource-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 95, 137, .1);
}

.resource-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--mist);
	color: var(--blue);
}

.resource-body h3 {
	margin: 0 0 6px;
	font: 700 19px var(--font-heading);
	color: var(--ink);
}

.resource-body p {
	margin: 0;
	font: 400 15px/1.6 var(--font-body);
	color: var(--slate);
}

.resource-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin-top: 14px;
}

.resource-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 700 14.5px var(--font-heading);
	color: var(--blue);
	transition: color .16s ease, gap .16s ease;
}

.resource-link:hover,
.resource-link:focus-visible {
	gap: 12px;
	color: var(--orange);
}

.resources-note {
	margin-top: 22px;
	padding: 16px 18px;
	border-radius: 10px;
	background: var(--mist);
	font: 400 12.5px/1.6 var(--font-body);
	color: #5c6672;
}

.resources-note strong {
	display: block;
	margin-bottom: 4px;
	font: 600 11.5px var(--font-mono);
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--navy);
}

.resources-note p {
	margin: 0;
}

@media (max-width: 1199px) {
	.resources-row {
		gap: 48px;
	}
}

@media (max-width: 991px) {
	.resources-section {
		padding: 64px 0 68px;
	}

	.resources-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.resources-image img {
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 767px) {
	.resources-section {
		padding: 52px 0 56px;
	}

	.resource-item {
		padding: 20px;
	}
}

/* Resources: optional light-blue background. */
.resources-section.bg-mist {
	background: var(--mist);
}

/* =========================
   FORM SECTION
   Intro + optional phone/image beside a Gravity Form card. New layout — only used where added.
========================= */
.form-section {
	position: relative;
	overflow: hidden;
	padding: 88px 0 92px;
	background: #fff;
	color: var(--ink);
}

.form-section .bg-dots {
	position: absolute;
	left: 0;
	bottom: 40px;
	width: 380px;
	height: 300px;
	background-image: radial-gradient(var(--blue) 2.2px, transparent 2.4px);
	background-size: 16px 16px;
	opacity: .1;
	pointer-events: none;
	-webkit-mask: radial-gradient(120% 120% at 0 100%, #000 20%, transparent 66%);
	mask: radial-gradient(120% 120% at 0 100%, #000 20%, transparent 66%);
}

.form-section .container {
	position: relative;
}

.form-row {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 64px;
	align-items: start;
}

.form-intro .eyebrow {
	margin-bottom: 12px;
	letter-spacing: 1.6px;
}

.form-intro h2 {
	margin: 0 0 16px;
	line-height: 1.16;
	color: var(--ink);
}

.form-intro .text p {
	margin: 0 0 16px;
	font: 400 16.5px/1.7 var(--font-body);
	color: #54595f;
}

.form-phone {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 8px 0 28px;
	padding: 16px 20px;
	border-left: 4px solid var(--orange);
	border-radius: 10px;
	background: var(--mist);
}

.form-phone span {
	font: 600 11.5px var(--font-mono);
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--slate);
}

.form-phone a {
	font: 800 24px var(--font-heading);
	color: var(--blue);
}

.form-phone a:hover {
	color: var(--orange);
}

.form-image {
	overflow: hidden;
	border: 1px solid #e2ded4;
	border-radius: 12px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .07);
}

.form-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.form-card {
	padding: 36px 38px 40px;
	border: 1px solid #d6e4ea;
	border-top: 4px solid var(--blue);
	border-radius: 13px;
	background: #fff;
	box-shadow: 0 14px 40px rgba(0, 0, 0, .08);
}

/* Gravity Forms (Orbital theme) in brand colours. GF prints its own variables with an ID selector, so these need !important. */
.form-card .gform-theme--framework {
	--gf-color-primary: #005f89 !important;
	--gf-color-primary-darker: #00445f !important;
	--gf-color-primary-rgb: 0, 95, 137 !important;
	--gf-color-primary-contrast: #fff !important;
	--gf-ctrl-border-color: #c9d6dd !important;
	--gf-ctrl-radius: 8px !important;
	--gf-ctrl-label-color-primary: #22252b !important;
	--gf-font-family-base: 'Open Sans', sans-serif !important;
	--gf-ctrl-btn-radius: 8px !important;
}

.form-card .gform_wrapper .gform_required_legend {
	display: none;
}

.form-card .gform_wrapper .gfield_label {
	font-weight: 600;
}

.form-card .gform_wrapper .gform_footer input[type="submit"],
.form-card .gform_wrapper .gform_footer button {
	padding: 14px 26px;
	border-radius: 8px;
	background: var(--blue);
	font: 700 15.5px var(--font-heading);
	color: #fff;
}

.form-card .gform_wrapper .gform_footer input[type="submit"]:hover,
.form-card .gform_wrapper .gform_footer button:hover {
	background: var(--blue-dark);
}

.form-card .gform_confirmation_message {
	font: 400 16px/1.6 var(--font-body);
	color: var(--ink);
}

@media (max-width: 1199px) {
	.form-row {
		gap: 44px;
	}
}

@media (max-width: 991px) {
	.form-section {
		padding: 64px 0 68px;
	}

	.form-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.form-image img {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 767px) {
	.form-section {
		padding: 52px 0 56px;
	}

	.form-card {
		padding: 26px 20px 28px;
	}
}

/* Resources: brand logo above an item's title — same box for every logo so different shapes read the same size. */
.resource-logo {
	display: flex;
	align-items: center;
	height: 40px;
	margin-bottom: 16px;
}

.resource-logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 140px;
	max-height: 40px;
	object-fit: contain;
}

/* Resources: Grid layout — container width, centred heading, boxes in columns. */
.resources-section.items-grid.no-image .resources-row {
	max-width: none;
}

.resources-section.items-grid .resources-content > .eyebrow,
.resources-section.items-grid .resources-content > h2,
.resources-section.items-grid .resources-content > .text {
	text-align: center;
}

.resources-section.items-grid .resources-content > .text {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

/* Flex (not grid) so an incomplete last row is centred. */
.resources-section.items-grid .resource-items {
	--cols: 3;
	--gap: 20px;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gap);
}

.resources-section.items-grid .resource-item {
	flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
	min-width: 0;
	flex-direction: column;
	padding: 28px 28px 26px;
	border-left-width: 1px;
	border-top: 4px solid var(--blue);
}

.resources-section.items-grid .resource-body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.resources-section.items-grid .resource-links {
	margin-top: auto;
	padding-top: 18px;
}

/* Whole box is the click target (.stretched link inside). */
.resource-item.has-link {
	position: relative;
	cursor: pointer;
}

.resource-item.has-link:hover,
.resource-item.has-link:focus-within {
	border-color: var(--blue);
	box-shadow: 0 14px 30px rgba(0, 95, 137, .14);
}

.resource-item.has-link:hover .resource-link,
.resource-item.has-link:focus-within .resource-link {
	gap: 12px;
	color: var(--orange);
}

@media (max-width: 991px) {
	.resources-section.items-grid .resource-items {
		--cols: 2;
	}
}

@media (max-width: 767px) {
	.resources-section.items-grid .resource-items {
		--cols: 1;
	}
}

/* Form section: submit button matches the hero's primary blue button (.btn.sheen), arrow included. */
.form-card .gform_wrapper .gform_footer .gform_button,
.form-card .gform_wrapper .gform_page_footer .gform_button {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 44px 15px 20px !important;
	background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10' fill='none'%3E%3Cpath d='M1 5h11M8.5 1.5 12 5l-3.5 3.5' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 20px center / 14px 10px !important;
	border: 0 !important;
	border-radius: 7px !important;
	font: 700 16px var(--font-heading) !important;
	line-height: normal !important;
	color: #fff !important;
	box-shadow: 0 6px 22px rgba(0, 95, 137, .4) !important;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.form-card .gform_wrapper .gform_footer .gform_button:hover,
.form-card .gform_wrapper .gform_footer .gform_button:focus-visible {
	background-color: var(--blue-dark) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 95, 137, .42) !important;
}

.form-card .gform_wrapper .gform_footer .gform_button::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 38%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent);
	animation: ms-sheen 6s ease-in-out infinite;
	pointer-events: none;
}

.gform-theme--framework .gform_validation_errors {
	display: none !important;
}

/* =========================
   LINK LIST SECTION
   Groups of document / download / web links in cards + highlighted note. New layout — only used where added.
========================= */
.link-list-section {
	position: relative;
	overflow: hidden;
	padding: 88px 0 92px;
	background: #fff;
	color: var(--ink);
}

.link-list-section .bg-dots {
	position: absolute;
	right: 0;
	top: 30px;
	width: 380px;
	height: 300px;
	background-image: radial-gradient(var(--blue) 2.2px, transparent 2.4px);
	background-size: 16px 16px;
	opacity: .1;
	pointer-events: none;
	-webkit-mask: radial-gradient(120% 120% at 100% 0, #000 20%, transparent 66%);
	mask: radial-gradient(120% 120% at 100% 0, #000 20%, transparent 66%);
}

.link-list-section .container {
	position: relative;
}

.link-list-section .section-head h2 {
	margin: 0;
	line-height: 1.16;
	color: var(--ink);
}

.link-list-section .section-head .text {
	max-width: 640px;
	margin: 16px auto 0;
	font: 400 16px/1.65 var(--font-body);
	color: var(--slate);
}

.link-groups {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.link-group {
	display: flex;
	flex-direction: column;
	padding: 32px 32px 28px;
	border: 1px solid #d6e4ea;
	border-top: 4px solid var(--blue);
	border-radius: 13px;
	background: #fff;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .05);
}

.link-group h3 {
	margin: 0 0 8px;
	font: 700 22px var(--font-heading);
	color: var(--ink);
}

.link-group .group-text {
	margin: 0 0 8px;
	font: 400 15px/1.6 var(--font-body);
	color: var(--slate);
}

.link-items {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.link-items li + li {
	border-top: 1px solid #e3ecf0;
}

.link-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 4px;
	font: 700 16px var(--font-heading);
	color: var(--ink);
	transition: color .16s ease;
}

.link-item .link-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: var(--mist);
	color: var(--blue);
	transition: background .16s ease, color .16s ease;
}

.link-item .link-label {
	flex: 1;
	min-width: 0;
}

.link-item .arrow {
	flex: none;
	color: var(--blue);
	transition: transform .16s ease;
}

.link-item:hover,
.link-item:focus-visible {
	color: var(--blue);
}

.link-item:hover .link-icon,
.link-item:focus-visible .link-icon {
	background: var(--blue);
	color: #fff;
}

.link-item:hover .arrow,
.link-item:focus-visible .arrow {
	transform: translateX(4px);
}

.link-list-note {
	display: flex;
	gap: 16px;
	margin-top: 24px;
	padding: 22px 26px;
	border-left: 4px solid var(--orange);
	border-radius: 11px;
	background: var(--mist);
}

.link-list-note .note-icon {
	flex: none;
	color: var(--orange);
}

.link-list-note strong {
	display: block;
	margin-bottom: 4px;
	font: 700 16px var(--font-heading);
	color: var(--ink);
}

.link-list-note p {
	margin: 0 0 8px;
	font: 400 15px/1.6 var(--font-body);
	color: #54595f;
}

.link-list-note .text-link {
	overflow-wrap: anywhere;
}

@media (max-width: 991px) {
	.link-list-section {
		padding: 64px 0 68px;
	}

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

@media (max-width: 767px) {
	.link-list-section {
		padding: 52px 0 56px;
	}

	.link-group {
		padding: 24px 20px 20px;
	}

	.link-list-note {
		padding: 18px 18px;
	}
}

/* Link List: a single group sits centred; an odd last group spans the full row. */
.link-groups > .link-group:only-child {
	grid-column: 1 / -1;
	width: 100%;
	max-width: 780px;
	margin: 0 auto;
}

.link-groups > .link-group:last-child:nth-child(odd):not(:only-child) {
	grid-column: 1 / -1;
}

/* ==========================================================================
   LOCATION PAGES (single location)
   ========================================================================== */

/* Intro on white so it separates from the mist Locations section below it. */
.location-single .home-intro.layout-service,
.locations-page .home-intro.layout-service,
.about-page .home-intro.layout-service {
	background: #fff;
}

/* Locations section with a single location: one centred card. */
.location-cards .service-cards.cols-1 {
	grid-template-columns: minmax(0, 400px);
	justify-content: center;
}

/* Hero photo credit (Service Hero "Image Credit" field; only output when filled). */
.service-hero .photo-credit {
	position: absolute;
	right: 16px;
	bottom: 12px;
	z-index: 2;
	margin: 0;
	font: 400 11px/1.4 var(--font-body);
	color: rgba(255, 255, 255, .72);
}


/* =========================
   JOB OPENINGS SECTION
   Open positions from Paycor's job feed, in the site design: filters (search / department / state / city,
   shared look with the Blog tools), department groups, job detail view, and Paycor's embed for applying.
   Only used where the layout is added (Careers).
========================= */
.job-openings-section {
	position: relative;
	overflow: hidden;
	padding: 88px 0 92px;
	background: #fff;
	color: var(--ink);
	scroll-margin-top: 100px;
}

.job-openings-section .bg-dots {
	position: absolute;
	right: 0;
	top: 30px;
	width: 380px;
	height: 300px;
	background-image: radial-gradient(var(--blue) 2.2px, transparent 2.4px);
	background-size: 16px 16px;
	opacity: .1;
	pointer-events: none;
	-webkit-mask: radial-gradient(120% 120% at 100% 0, #000 20%, transparent 66%);
	mask: radial-gradient(120% 120% at 100% 0, #000 20%, transparent 66%);
}

.job-openings-section .container {
	position: relative;
	max-width: 1140px;
}

.job-openings-section .section-head h2 {
	margin: 0;
	line-height: 1.16;
	color: var(--ink);
}

.job-openings-section .section-head .text {
	max-width: 640px;
	margin: 16px auto 0;
	font: 400 16px/1.65 var(--font-body);
	color: var(--slate);
}

/* Filters */
.job-tools {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) auto;
	gap: 14px;
	margin: -10px 0 34px;
}

.job-tools .blog-select,
.job-tools .blog-search {
	flex: none;
	min-width: 0;
}

.job-tools .job-submit {
	height: 52px;
	padding: 0 26px;
}

/* With JavaScript every change loads in place, so the Search button is not needed. */
.job-openings-section[data-jobs-ajax].is-live .job-submit {
	display: none;
}

.job-openings-section[data-jobs-ajax].is-live .job-tools {
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
}

.job-notice {
	max-width: 640px;
	margin: -10px auto 30px;
	padding: 14px 18px;
	border-radius: 8px;
	background: var(--mist);
	font: 500 15px/1.55 var(--font-body);
	text-align: center;
	color: var(--blue);
}

/* Results */
.job-results {
	transition: opacity .2s ease;
}

.job-results.is-loading {
	opacity: .45;
	pointer-events: none;
}

.job-results-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid #e3ecf0;
}

.job-total {
	margin: 0;
	font: 600 15px/1.4 var(--font-body);
	color: var(--slate);
}

.job-reset {
	margin-left: 14px;
	font-weight: 700;
	color: var(--blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.job-reset:hover {
	color: var(--blue-dark);
}

.job-sorts {
	display: flex;
	align-items: center;
	gap: 6px;
}

.job-sorts-label {
	margin-right: 4px;
	font: 400 14px/1.4 var(--font-body);
	color: var(--slate);
}

.job-sort {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 20px;
	font: 700 14px/1.2 var(--font-heading);
	color: var(--ink);
	transition: background .16s ease, color .16s ease;
}

.job-sort svg {
	opacity: 0;
	transition: transform .2s ease, opacity .16s ease;
}

.job-sort:hover {
	color: var(--blue);
}

.job-sort.is-active {
	background: var(--mist);
	color: var(--blue);
}

.job-sort.is-active svg {
	opacity: 1;
}

.job-sort.is-desc svg {
	transform: rotate(180deg);
}

.job-groups {
	display: grid;
	gap: 22px;
}

.job-group {
	padding: 24px 30px 10px;
	border: 1px solid #d6e4ea;
	border-left: 4px solid var(--blue);
	border-radius: 13px;
	background: #fff;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .05);
}

.job-group-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 4px;
}

.job-group-head h3 {
	margin: 0;
	font: 700 22px/1.25 var(--font-heading);
	color: var(--ink);
}

.job-count {
	flex: none;
	padding: 3px 10px;
	border-radius: 20px;
	background: var(--mist);
	font: 600 12.5px/1.5 var(--font-body);
	color: var(--blue);
}

.job-items {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.job-items li + li {
	border-top: 1px solid #e3ecf0;
}

.job-item {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 15px 4px;
	color: var(--ink);
	transition: color .16s ease;
}

.job-item .job-text {
	flex: 1;
	min-width: 0;
}

.job-item .job-title {
	display: block;
	font: 700 16.5px/1.35 var(--font-heading);
}

.job-item .job-dept {
	display: block;
	margin-top: 3px;
	font: 400 14px/1.4 var(--font-body);
	color: var(--slate);
}

.job-location {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	font: 400 15px/1.4 var(--font-body);
	color: var(--slate);
}

.job-location svg {
	flex: none;
	color: var(--blue);
}

.job-item .arrow {
	flex: none;
	color: var(--blue);
	transition: transform .16s ease;
}

.job-item:hover,
.job-item:focus-visible {
	color: var(--blue);
}

.job-item:hover .arrow,
.job-item:focus-visible .arrow {
	transform: translateX(4px);
}

.job-empty {
	margin: 30px 0 10px;
	text-align: center;
	font: 400 16px/1.6 var(--font-body);
	color: var(--slate);
}

.job-openings-foot {
	margin-top: 36px;
	text-align: center;
}

.job-openings-foot p {
	margin: 0;
	font: 400 16px/1.6 var(--font-body);
	color: var(--slate);
}

.job-openings-foot p a {
	font-weight: 700;
	color: var(--blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.job-openings-foot p a:hover {
	color: var(--blue-dark);
}

.job-openings-foot .btn {
	margin-top: 22px;
}

/* Back link (job detail / application form) */
.job-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 26px;
	font: 700 15px/1.3 var(--font-heading);
	color: var(--blue);
}

.job-back .arrow {
	transform: rotate(180deg);
	transition: transform .16s ease;
}

.job-back:hover .arrow,
.job-back:focus-visible .arrow {
	transform: rotate(180deg) translateX(4px);
}

/* Job detail */
.job-detail {
	max-width: 900px;
	margin: 0 auto;
}

.job-detail-head {
	padding-bottom: 30px;
	margin-bottom: 34px;
	border-bottom: 1px solid #e3ecf0;
}

.job-detail-head h2 {
	margin: 0;
	line-height: 1.16;
	color: var(--ink);
}

.job-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 26px;
	padding: 0;
	list-style: none;
}

.job-meta li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 20px;
	background: var(--mist);
	font: 600 14px/1.4 var(--font-body);
	color: var(--ink);
}

.job-meta svg {
	color: var(--blue);
}

.job-description {
	font: 400 16px/1.7 var(--font-body);
	color: var(--slate);
}

.job-description p,
.job-description ul,
.job-description ol {
	margin: 0 0 16px;
}

.job-description h3 {
	margin: 32px 0 12px;
	font: 700 21px/1.3 var(--font-heading);
	color: var(--ink);
}

.job-description > h3:first-child {
	margin-top: 0;
}

.job-description ul,
.job-description ol {
	padding-left: 22px;
}

.job-description li + li {
	margin-top: 6px;
}

.job-description li::marker {
	color: var(--blue);
}

.job-description b,
.job-description strong {
	color: var(--ink);
}

.job-description a {
	color: var(--blue);
	text-decoration: underline;
}

.job-description > :last-child {
	margin-bottom: 0;
}

.job-detail-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid #e3ecf0;
}

/* Paycor's own embed (application form, or the whole board as a fallback). */
.job-openings-section.is-embed .container {
	max-width: 1140px;
}

.job-embed iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* Off metrosales.com Paycor's embed does not run: a link to its own page instead. */
.job-paycor-link {
	max-width: 640px;
	margin: 0 auto;
	padding: 36px 30px;
	border: 1px solid #d6e4ea;
	border-radius: 13px;
	text-align: center;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .05);
}

.job-paycor-link p {
	margin: 0 0 22px;
	font: 400 16px/1.6 var(--font-body);
	color: var(--slate);
}

@media (max-width: 1199px) {
	.job-tools,
	.job-openings-section[data-jobs-ajax].is-live .job-tools {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.job-tools .job-search {
		grid-column: 1 / -1;
	}
}

@media (max-width: 991px) {
	.job-openings-section {
		padding: 64px 0 68px;
	}
}

@media (max-width: 767px) {
	.job-tools,
	.job-openings-section[data-jobs-ajax].is-live .job-tools {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-bottom: 28px;
	}

	.job-tools .job-submit {
		width: 100%;
	}

	.job-group {
		padding: 20px 20px 6px;
	}

	.job-group-head h3 {
		font-size: 20px;
	}

	.job-item {
		flex-wrap: wrap;
		gap: 4px 12px;
		position: relative;
		padding-right: 30px;
	}

	.job-item .job-text {
		flex-basis: 100%;
	}

	.job-location {
		font-size: 14px;
	}

	.job-item .arrow {
		position: absolute;
		right: 4px;
		top: 50%;
		margin-top: -5px;
	}

	.job-item:hover .arrow,
	.job-item:focus-visible .arrow {
		transform: none;
	}

	.job-results-bar {
		align-items: flex-start;
		flex-direction: column;
	}

	.job-detail-foot .btn {
		width: 100%;
	}
}

/* Form card: small print note inside a form (Gravity Forms HTML field with CSS class "form-note", e.g. the Contact Form SMS consent). */
.form-card .gfield.form-note {
	margin: 0;
	font: 400 13px/1.55 var(--font-body);
	color: var(--slate);
}

/* =========================
   TESTIMONIAL LIST SECTION
   Every testimonial as a masonry wall of quote cards (no slider); every 5th card is a dark accent card.
   New layout — only used where added.
========================= */
.testimonial-list-section {
	position: relative;
	overflow: hidden;
	padding: 88px 0 72px;
	background: var(--mist);
	color: var(--ink);
}

.testimonial-list-section .bg-dots {
	position: absolute;
	right: 0;
	top: 30px;
	width: 420px;
	height: 320px;
	background-image: radial-gradient(var(--blue) 2.2px, transparent 2.4px);
	background-size: 16px 16px;
	opacity: .12;
	pointer-events: none;
	-webkit-mask: radial-gradient(120% 120% at 100% 0, #000 20%, transparent 66%);
	mask: radial-gradient(120% 120% at 100% 0, #000 20%, transparent 66%);
}

.testimonial-list-section .container {
	position: relative;
}

.testimonial-list-section .section-head h2 {
	margin: 0;
	line-height: 1.16;
	color: var(--ink);
}

.testimonial-list-section .section-head .text {
	max-width: 640px;
	margin: 16px auto 0;
	font: 400 16px/1.65 var(--font-body);
	color: var(--slate);
}

.testimonial-wall {
	columns: 3;
	column-gap: 24px;
}

.t-card {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0 0 24px;
	padding: 30px 30px 26px;
	break-inside: avoid;
	border: 1px solid #d6e4ea;
	border-radius: 13px;
	background: #fff;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .05);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.t-card:hover {
	transform: translateY(-3px);
	border-color: var(--blue);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .09);
}

.t-card .t-mark {
	margin-bottom: 16px;
	color: var(--sky);
}

.t-card blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.t-card blockquote p {
	margin: 0;
	font: 400 15.5px/1.7 var(--font-body);
	color: #3c4148;
}

.t-card figcaption {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid #e3ecf0;
}

.t-card .t-name {
	font: 700 16px/1.3 var(--font-heading);
	color: var(--ink);
}

.t-card .t-details {
	font: 600 12.5px/1.4 var(--font-body);
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--blue);
}

/* Dark accent card for rhythm. */
.t-card:nth-child(5n+2) {
	border-color: transparent;
	background: linear-gradient(140deg, #1f2c3a, #2b3a4a);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}

.t-card:nth-child(5n+2) blockquote p {
	color: #e3e9ef;
}

.t-card:nth-child(5n+2) figcaption {
	border-top-color: rgba(255, 255, 255, .14);
}

.t-card:nth-child(5n+2) .t-name {
	color: #fff;
}

.t-card:nth-child(5n+2) .t-details {
	color: var(--sky);
}

@media (max-width: 1199px) {
	.testimonial-wall {
		columns: 2;
	}
}

@media (max-width: 991px) {
	.testimonial-list-section {
		padding: 64px 0 48px;
	}
}

@media (max-width: 767px) {
	.testimonial-wall {
		columns: 1;
	}

	.t-card {
		padding: 26px 22px 22px;
	}
}

/* =========================
   BLOG POSTS SECTION + BLOG CARD + SINGLE POST
   Blog listing (category pills, card grid, paging) and the single post template. New — only on blog views.
========================= */
.blog-posts-section {
	position: relative;
	padding: 84px 0 92px;
	background: var(--mist);
	color: var(--ink);
	scroll-margin-top: 100px;
}

.blog-posts-section .section-head h2 {
	margin: 0;
	line-height: 1.16;
	color: var(--ink);
}

.blog-posts-section .section-head .text {
	max-width: 640px;
	margin: 16px auto 0;
	font: 400 16px/1.65 var(--font-body);
	color: var(--slate);
}

.blog-tools {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin: -10px 0 40px;
}

.blog-select,
.blog-search {
	position: relative;
	display: block;
	flex: 0 1 300px;
}

.blog-select select,
.blog-search input {
	width: 100%;
	height: 52px;
	padding: 0 46px 0 20px;
	border: 1.5px solid #c9dbe3;
	border-radius: 8px;
	background: #fff;
	font: 500 15px/1.2 var(--font-body);
	color: var(--ink);
	transition: border-color .16s ease, box-shadow .16s ease;
}

.blog-select select {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.blog-search {
	flex-basis: 360px;
}

.blog-search input::placeholder {
	color: var(--slate);
	opacity: 1;
}

/* Hide the browser's own clear (x) button — the field clears with backspace like any other. */
.blog-search input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.blog-select select:hover,
.blog-search input:hover {
	border-color: #9fbfcc;
}

.blog-select select:focus,
.blog-search input:focus {
	outline: none;
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(0, 95, 137, .12);
}

.blog-select-caret,
.blog-search-icon {
	position: absolute;
	top: 50%;
	right: 18px;
	transform: translateY(-50%);
	color: var(--blue);
	pointer-events: none;
}

/* Custom category dropdown (built by custom.js from the native select, which is then hidden). */
.blog-select.is-enhanced select {
	display: none;
}

.blog-dropdown-toggle {
	display: flex;
	align-items: center;
	width: 100%;
	height: 52px;
	padding: 0 46px 0 20px;
	border: 1.5px solid #c9dbe3;
	border-radius: 8px;
	background: #fff;
	font: 500 15px/1.2 var(--font-body);
	color: var(--slate);
	text-align: left;
	cursor: pointer;
	transition: border-color .16s ease, box-shadow .16s ease;
}

.blog-dropdown-toggle.has-value {
	color: var(--ink);
}

.blog-dropdown-label {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.blog-dropdown-toggle:hover {
	border-color: #9fbfcc;
}

.blog-dropdown-toggle:focus-visible,
.blog-select.is-open .blog-dropdown-toggle {
	outline: none;
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(0, 95, 137, .12);
}

.blog-select-caret {
	transition: transform .2s ease;
}

.blog-select.is-open .blog-select-caret {
	transform: translateY(-50%) rotate(180deg);
}

.blog-dropdown-list {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 340px;
	margin: 0;
	padding: 8px;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	border: 1px solid #dce7ec;
	border-radius: 11px;
	background: #fff;
	box-shadow: 0 18px 40px rgba(31, 44, 58, .16);
	scrollbar-width: thin;
	scrollbar-color: #c9dbe3 transparent;
}

.blog-dropdown-list:focus {
	outline: none;
}

.blog-select.is-open .blog-dropdown-list {
	animation: blog-dropdown-in .16s ease;
}

@keyframes blog-dropdown-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

.blog-dropdown-option {
	position: relative;
	margin: 0;
	padding: 10px 36px 10px 14px;
	border-radius: 7px;
	font: 500 15px/1.35 var(--font-body);
	color: var(--ink);
	cursor: pointer;
}

.blog-dropdown-option.is-child {
	padding-left: 28px;
	font-size: 14.5px;
	color: var(--slate);
}

.blog-dropdown-option.is-focused {
	background: var(--mist);
	color: var(--blue);
}

.blog-dropdown-option.is-selected {
	font-weight: 700;
	color: var(--blue);
}

/* Check mark on the selected category */
.blog-dropdown-option.is-selected::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 14px;
	width: 10px;
	height: 5px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(-45deg);
}

.blog-results {
	transition: opacity .2s ease;
}

.blog-results.is-loading {
	opacity: .45;
	pointer-events: none;
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.blog-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #e2ded4;
	border-radius: 13px;
	background: #fff;
	box-shadow: 0 3px 16px rgba(0, 0, 0, .055);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.blog-card:hover {
	transform: translateY(-4px);
	border-color: var(--blue);
	box-shadow: 0 16px 36px rgba(0, 0, 0, .11);
}

.blog-card-image {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #dfe8ee;
}

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

.blog-card:hover .blog-card-image img {
	transform: scale(1.04);
}

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

.blog-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin-bottom: 12px;
	font: 400 13px/1.4 var(--font-body);
	color: var(--slate);
}

.blog-card-cat {
	position: relative;
	top: 2px;
	font: 700 12px/1.4 var(--font-body);
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--blue);
}

.blog-card h3 {
	margin: 0 0 10px;
	font: 700 20px/1.3 var(--font-heading);
	color: var(--ink);
}

.blog-card h3 a {
	color: inherit;
}

.blog-card p {
	margin: 0 0 18px;
	font: 400 14.5px/1.6 var(--font-body);
	color: var(--slate);
}

.blog-card .text-link {
	margin-top: auto;
}

.blog-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 40px;
}

.blog-pagination a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1.5px solid #c9dbe3;
	border-radius: 8px;
	background: #fff;
	font: 700 15px var(--font-heading);
	color: var(--ink);
}

.blog-pagination a.is-active,
.blog-pagination a:hover {
	border-color: var(--blue);
	background: var(--blue);
	color: #fff;
}

.blog-page-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1.5px solid #c9dbe3;
	border-radius: 8px;
	background: #fff;
	color: var(--blue);
}

.blog-pagination a.blog-page-arrow {
	padding: 0;
	color: var(--blue);
}

.blog-pagination a.blog-page-arrow:hover {
	color: #fff;
}

.blog-page-arrow.prev .arrow {
	transform: rotate(180deg);
}

.blog-page-arrow.is-disabled {
	opacity: .4;
}

.blog-page-gap {
	min-width: 20px;
	font: 700 15px var(--font-heading);
	text-align: center;
	color: var(--slate);
}

.blog-empty {
	text-align: center;
	font: 400 16px/1.6 var(--font-body);
	color: var(--slate);
}

/* Single post */
.blog-hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	font: 400 15px/1.4 var(--font-body);
	color: #c9d6e3;
}

.blog-hero-meta .blog-tag {
	padding: 5px 12px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 30px;
	font: 600 12.5px/1.3 var(--font-body);
	letter-spacing: .5px;
	text-transform: uppercase;
	color: #fff;
	transition: background .16s ease, border-color .16s ease;
}

.blog-hero-meta .blog-tag:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .14);
}

.blog-article {
	padding: 72px 0 64px;
	background: #fff;
}

.post-body {
	max-width: 780px;
	margin: 0 auto;
	font: 400 17px/1.75 var(--font-body);
	color: #3c4148;
}

.post-body > * {
	margin: 0 0 22px;
}

.post-body h2,
.post-body h3,
.post-body h4 {
	margin: 30px 0 14px;
	line-height: 1.25;
	color: var(--ink);
}

.post-body h2 {
	font: 700 30px/1.2 var(--font-heading);
}

.post-body h3 {
	font: 700 24px/1.25 var(--font-heading);
}

.post-body h4 {
	font: 700 24px/1.25 var(--font-heading);
}

.post-body h5 {
	font: 700 20px/1.3 var(--font-heading);
	color: var(--ink);
}

.post-body h6 {
	font: 700 18px/1.35 var(--font-heading);
	color: var(--ink);
}

/* Imported posts carry inline text-align on headings — headings are always left-aligned. */
.post-body h1,
.post-body h2,
.post-body h3,
.post-body h4,
.post-body h5,
.post-body h6 {
	text-align: left !important;
}

/* No trailing space after the last block (also inside lists, quotes and wrappers). */
.post-body > :last-child,
.post-body p:last-child,
.post-body ul:last-child,
.post-body ol:last-child {
	margin-bottom: 0;
}

.post-body a {
	color: var(--blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.post-body ul,
.post-body ol {
	padding-left: 24px;
}

.post-body li + li {
	margin-top: 8px;
}

.post-body li::marker {
	color: var(--blue);
}

.post-body blockquote {
	padding: 6px 0 6px 22px;
	border-left: 4px solid var(--blue);
	font-style: italic;
	color: var(--ink);
}

.post-body img {
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 11px;
}

.post-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.post-body th,
.post-body td {
	padding: 10px 12px;
	border: 1px solid #e3ecf0;
	text-align: left;
}

.post-back {
	max-width: 780px;
	margin: 40px auto 0;
	padding-top: 24px;
	border-top: 1px solid #e3ecf0;
}

@media (max-width: 1199px) {
	.blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 991px) {
	.blog-posts-section {
		padding: 64px 0 68px;
	}

	.blog-article {
		padding: 52px 0 48px;
	}
}

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

	.blog-tools {
		gap: 12px;
		margin-bottom: 30px;
	}

	.blog-select,
	.blog-search {
		flex-basis: 100%;
	}

	.blog-pagination {
		gap: 4px;
	}

	.blog-pagination a,
	.blog-page-arrow {
		min-width: 34px;
		width: auto;
		height: 36px;
		padding: 0 8px;
		font-size: 14px;
	}

	.blog-page-gap {
		min-width: 14px;
	}

	.post-body {
		font-size: 16px;
	}

	.post-body h2 {
		font-size: 25px;
	}

	.post-body h3,
	.post-body h4 {
		font-size: 21px;
	}
}

/* =========================
   POLICY CONTENT SECTION
   Long legal/policy text in a narrower, centred container. New layout — only used where added.
========================= */
.policy-section {
	padding: 80px 0 90px;
	background: #fff;
	color: var(--ink);
}

/* A bit narrower than the regular container (1920px) for comfortable reading. */
.policy-section .policy-container {
	max-width: calc(1140px + var(--gutter) * 2);
}

.policy-head {
	margin-bottom: 28px;
}

.policy-title {
	margin: 0;
	font: 700 32px/1.2 var(--font-heading);
	color: var(--ink);
}

.policy-updated {
	margin: 8px 0 0;
	font: 400 14px/1.5 var(--font-body);
	color: var(--slate);
}

.policy-body {
	font: 400 16.5px/1.75 var(--font-body);
	color: #3c4148;
}

.policy-body > * {
	margin: 0 0 20px;
}

.policy-body h2 {
	margin: 48px 0 16px;
	padding-top: 32px;
	border-top: 1px solid #e3ecf0;
	font: 700 26px/1.25 var(--font-heading);
	color: var(--ink);
	scroll-margin-top: 110px;
}

.policy-body > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.policy-body h3 {
	margin: 30px 0 12px;
	font: 700 20px/1.3 var(--font-heading);
	color: var(--ink);
}

.policy-body a {
	color: var(--blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.policy-body ul,
.policy-body ol {
	padding-left: 22px;
}

.policy-body li + li,
.policy-body li > ul,
.policy-body li > ol {
	margin-top: 10px;
}

.policy-body li::marker {
	color: var(--blue);
}

.policy-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.policy-body th,
.policy-body td {
	padding: 10px 12px;
	border: 1px solid #e3ecf0;
	text-align: left;
	vertical-align: top;
}

@media (max-width: 991px) {
	.policy-section {
		padding: 60px 0 68px;
	}
}

@media (max-width: 767px) {
	.policy-body {
		font-size: 15.5px;
	}

	.policy-body h2 {
		font-size: 22px;
	}
}

/* =========================
   404 PAGE
   Content from Theme Settings → 404 Page. Dark hero-style section with a large faint "404".
========================= */
.error-404-section {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: 640px;
	padding: 110px 0 120px;
	background: linear-gradient(120deg, #171a20 0%, #1f2c3a 58%, #243748 100%);
	color: #fff;
	text-align: center;
}

.error-404-section .container {
	position: relative;
	z-index: 2;
}

.error-404-section .hero-photo {
	position: absolute;
	inset: 0;
	opacity: .22;
}

.error-404-section .hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.error-404-section .error-dots {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 520px;
	height: 360px;
	background-image: radial-gradient(var(--sky) 2px, transparent 2.2px);
	background-size: 18px 18px;
	opacity: .14;
	-webkit-mask: radial-gradient(120% 120% at 0 100%, #000 18%, transparent 64%);
	mask: radial-gradient(120% 120% at 0 100%, #000 18%, transparent 64%);
	pointer-events: none;
}

.error-404-section .glow {
	position: absolute;
	width: 620px;
	height: 620px;
	right: -160px;
	top: -220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 95, 137, .38), transparent 68%);
	filter: blur(10px);
	pointer-events: none;
}

.error-404-section .error-code {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	transform: translate(-50%, -50%);
	font: 800 clamp(200px, 30vw, 440px)/1 var(--font-heading);
	letter-spacing: -.02em;
	color: transparent;
	-webkit-text-stroke: 2px rgba(143, 203, 228, .14);
	white-space: nowrap;
	user-select: none;
	pointer-events: none;
}

.error-content {
	max-width: 720px;
	margin: 0 auto;
}

.error-content .eyebrow {
	margin-bottom: 14px;
	color: var(--sky);
}

.error-content h1 {
	margin: 0;
	font: 700 clamp(38px, 5vw, 60px)/1.1 var(--font-heading);
	color: #fff;
}

.error-content .underline {
	display: block;
	margin: 16px auto 0;
}

.error-content .text {
	max-width: 600px;
	margin: 22px auto 0;
	font: 400 17px/1.7 var(--font-body);
	color: #c9d6e3;
}

.error-content .btn-group {
	margin-top: 34px;
}

@media (max-width: 767px) {
	.error-404-section {
		min-height: 520px;
		padding: 80px 0 90px;
	}

	.error-content .text {
		font-size: 16px;
	}
}

/* =========================
   CASE STUDIES SECTION
   PDF download cards. Cards reuse the Blog card styles (.blog-grid / .blog-card). New — only on the Case Studies layout.
========================= */
.case-studies-section {
	position: relative;
	padding: 84px 0 92px;
	background: var(--mist);
	color: var(--ink);
	scroll-margin-top: 100px;
}

.case-studies-section .section-head h2 {
	margin: 0;
	line-height: 1.16;
	color: var(--ink);
}

.case-studies-section .section-head .text {
	max-width: 640px;
	margin: 16px auto 0;
	font: 400 16px/1.65 var(--font-body);
	color: var(--slate);
}

.case-study-card.no-file:hover {
	transform: none;
	border-color: #e2ded4;
	box-shadow: 0 3px 16px rgba(0, 0, 0, .055);
}

.case-study-card.no-file:hover .blog-card-image img {
	transform: none;
}

@media (max-width: 991px) {
	.case-studies-section {
		padding: 64px 0 68px;
	}
}

/* =========================
   CLIENT REVISIONS (10/22)
========================= */
/* No widows: headings break into balanced lines, body copy avoids a lone last word */
h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
}

p,
li,
blockquote,
figcaption {
	text-wrap: pretty;
}

/* Service hero tagline (e.g. "AI for Business, Done Responsibly.") */
.service-hero .hero-tagline {
	margin: -6px 0 16px;
	font: 600 22px/1.35 var(--font-heading);
	color: var(--sky);
}

@media (max-width: 767px) {
	.service-hero .hero-tagline {
		font-size: 18px;
	}

	/* Odd number of hero stats: the last one spans the row */
	.hero-stats .stat:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* Header on small laptops: "Print and Workflow Solutions" stays on one line and the Contact Us button stays on screen */
@media (min-width: 1366px) and (max-width: 1535px) {
	.main-bar .container {
		gap: 20px;
	}

	.site-logo img {
		height: 28px;
	}

	.main-navigation .menu {
		gap: 12px;
	}

	.main-navigation .menu > li > a {
		font-size: 14px;
	}
}

@media (min-width: 1200px) and (max-width: 1365px) {
	.main-bar .container {
		gap: 16px;
	}

	.site-logo img {
		height: 26px;
	}

	.main-navigation .menu {
		gap: 6px;
	}

	.main-navigation .menu > li > a {
		font-size: 13px;
	}

	.main-navigation .menu > .menu-item-has-children > a {
		padding-right: 14px;
	}

	.submenu-toggle {
		width: 14px;
	}
}

/* Home hero "The Total Office Approach" boxes */
.panel-item {
	gap: 14px;
}

.panel-item .item-text {
	text-transform: capitalize;
}

/* Multi-function Printers hero (square Ricoh product shot): show the whole machine on the right instead of a wide crop behind the text */
@media (min-width: 992px) {
	.postid-353 .service-hero .hero-photo {
		width: auto;
		aspect-ratio: 1 / 1;
		-webkit-mask: linear-gradient(90deg, transparent 0, #000 28%);
		mask: linear-gradient(90deg, transparent 0, #000 28%);
	}

	.postid-353 .service-hero .hero-photo img {
		object-position: center bottom;
	}

	.postid-353 .service-hero .hero-fade {
		background: linear-gradient(100deg, #171a20 0%, rgba(28, 40, 53, .95) 32%, rgba(36, 55, 72, .35) 55%, transparent 68%);
	}
}

/* =========================
   LOGO CARDS SECTION (AI platforms, workshops)
========================= */
.logo-cards-section {
	position: relative;
	overflow: hidden;
	padding: 88px 0;
}

.logo-cards-section.style-dark {
	background: linear-gradient(120deg, #171a20 0%, #1f2c3a 58%, #243748 100%);
	color: #eef1f5;
}

.logo-cards-section.style-light {
	background: #fff;
	border-top: 1px solid #e6e2d9;
	border-bottom: 1px solid #e6e2d9;
}

.logo-cards-section.style-sand {
	background: #f4f1ea;
}

.logo-cards-section .bg-dots {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 900px;
	max-width: 100%;
	height: 520px;
	background-image: radial-gradient(var(--sky) 1.6px, transparent 1.8px);
	background-size: 18px 18px;
	opacity: .14;
	pointer-events: none;
	-webkit-mask: radial-gradient(110% 110% at 100% 100%, #000 18%, transparent 64%);
	mask: radial-gradient(110% 110% at 100% 100%, #000 18%, transparent 64%);
}

.logo-cards-section.style-light .bg-dots {
	top: 0;
	bottom: auto;
	background-image: radial-gradient(var(--blue) 1.6px, transparent 1.8px);
	opacity: .1;
	-webkit-mask: radial-gradient(110% 110% at 100% 0, #000 18%, transparent 64%);
	mask: radial-gradient(110% 110% at 100% 0, #000 18%, transparent 64%);
}

.logo-cards-section .glow {
	position: absolute;
	left: -180px;
	top: -220px;
	width: 560px;
	height: 560px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 95, 137, .34), transparent 68%);
	filter: blur(10px);
	pointer-events: none;
}

.logo-cards-row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	align-items: center;
	gap: 64px;
}

.layout-stacked .logo-cards-row {
	grid-template-columns: 1fr;
	gap: 44px;
}

.layout-stacked .logo-cards-head {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.logo-cards-head h2 {
	margin: 0 0 14px;
	line-height: 1.16;
	color: var(--ink);
}

.style-dark .logo-cards-head h2 {
	color: #fff;
}

.logo-cards-head .underline {
	display: block;
	margin: -4px 0 22px;
}

.layout-stacked .logo-cards-head .underline {
	margin-left: auto;
	margin-right: auto;
}

.logo-cards-head .text p {
	margin: 0 0 16px;
	font: 400 16.5px/1.7 var(--font-body);
	color: #54595f;
}

.style-dark .logo-cards-head .text p {
	color: #c3ccd6;
}

.logo-cards-head .text p:last-child {
	margin-bottom: 0;
}

.logo-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 26px;
	padding: 9px 16px 9px 12px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 30px;
	background: rgba(255, 255, 255, .06);
	font: 600 12.5px var(--font-mono);
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #fff;
}

.style-light .logo-badge {
	border-color: #d6dde3;
	background: var(--mist);
	color: var(--ink);
}

.logo-badge img {
	display: block;
	width: auto;
	height: 18px;
}

.logo-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.layout-stacked .logo-cards {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.logo-card {
	position: relative;
	padding: 26px 24px 24px;
	border: 1px solid #e2ded4;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 3px 16px rgba(0, 0, 0, .055);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.style-dark .logo-card {
	border-color: rgba(255, 255, 255, .12);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}

.logo-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .1);
}

.style-dark .logo-card:hover {
	box-shadow: 0 18px 40px rgba(0, 0, 0, .36);
}

.logo-card.has-tag {
	border-color: rgba(242, 114, 59, .55);
}

.logo-card-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 18px;
	border: 1px solid #e6e9ee;
	border-radius: 12px;
	background: #f5f7f9;
}

.logo-card-mark img {
	display: block;
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.logo-card h3 {
	margin: 0 0 8px;
	font: 700 20px/1.25 var(--font-heading);
	color: var(--ink);
}

.logo-card p {
	margin: 0;
	font: 400 14.5px/1.6 var(--font-body);
	color: var(--slate);
}

.logo-card-tag {
	position: absolute;
	top: 18px;
	right: 18px;
	padding: 4px 10px;
	border-radius: 20px;
	background: rgba(242, 114, 59, .12);
	font: 700 11px/1.3 var(--font-mono);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #c4521f;
}

@media (max-width: 1199px) {
	.logo-cards-row {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

@media (max-width: 991px) {
	.logo-cards-section {
		padding: 64px 0;
	}

	.layout-stacked .logo-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575px) {
	.logo-cards,
	.layout-stacked .logo-cards {
		grid-template-columns: 1fr;
	}

	.logo-card {
		padding: 22px 20px 20px;
	}
}

/* AI Services page: "Our AI services" on white so it doesn't run into the mist Overview above it */
.postid-17 .home-services {
	background-color: #fff;
}

/* Testimonials side column: stats bar keeps its own height; the side reviews take any extra height from a long featured quote */
.testimonial-box .side-review {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.testimonial-box .review-stats {
	flex: none;
}

/* =========================
   LENIS SMOOTH SCROLL (lenis@1.3.17 base styles)
========================= */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
	overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
	overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
	pointer-events: none;
}

/* ==========================================================================
   TOTAL VIGILANCE (services 1287) — card grids balanced, this page only
   ========================================================================== */

/* Coverage: 3 + 2, second row centered */
@media (min-width: 992px) {
	.postid-1287 #coverage .logo-cards {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.postid-1287 #coverage .logo-card {
		grid-column: span 2;
	}

	.postid-1287 #coverage .logo-card:nth-child(4) {
		grid-column: 2 / span 2;
	}

	/* Why it's different: one row of four */
	.postid-1287 #why-different .logo-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Ways to have it: last card full width */
@media (min-width: 576px) {
	.postid-1287 #ways-to-have-it .logo-card:last-child {
		grid-column: 1 / -1;
	}
}

@media (min-width: 576px) and (max-width: 991px) {
	.postid-1287 #coverage .logo-card:last-child {
		grid-column: 1 / -1;
	}
}

/* Testimonials: normal arrow cursor over every quote box (the grab hand rendered white on white) */
.testimonial-cards .swiper,
.testimonial-card,
.testimonial-box .featured,
.testimonial-box .slide,
.side-review {
	cursor: default;
}

.testimonial-card blockquote,
.testimonial-card blockquote p,
.testimonial-box blockquote,
.testimonial-box blockquote p {
	cursor: text;
}

/* Form section callout (Order Supplies: auto-shipment note + meter reading link) */
.form-callout {
	margin: 0 0 28px;
	padding: 20px 24px;
	border-left: 4px solid var(--blue);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 3px 16px rgba(0, 0, 0, .055);
}

.form-callout p {
	margin: 0 0 10px;
	font: 400 16px/1.65 var(--font-body);
	color: #54595f;
}

.form-callout p:last-child {
	margin-bottom: 0;
}

.form-callout strong {
	display: block;
	font: 800 20px/1.3 var(--font-heading);
	color: var(--ink);
}

.form-callout a {
	font-weight: 600;
	color: var(--blue);
	text-decoration: underline;
}

.form-callout a:hover {
	color: var(--orange);
}

/* Card slider arrows: solid blue, centered on the sides of the cards */
.cards-stage {
	position: relative;
	padding: 0 66px;
}

.cards-stage .slider-btn {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 46px;
	height: 46px;
	margin-top: -23px;
	background: var(--blue);
	border: 0;
	border-radius: 50%;
	color: #fff;
	box-shadow: 0 6px 16px rgba(0, 95, 137, .28);
	transition: background .18s ease, transform .18s ease;
}

.cards-stage .slider-btn:hover {
	background: var(--orange);
	transform: scale(1.06);
}

.cards-stage .slider-btn.prev {
	left: 0;
}

.cards-stage .slider-btn.next {
	right: 0;
}

@media (max-width: 767px) {
	.cards-stage {
		padding: 0 44px;
	}

	.cards-stage .slider-btn {
		width: 36px;
		height: 36px;
		margin-top: -18px;
	}
}

/* =========================
   PRODUCT LIBRARY EMBED (Ricoh / Xerox catalog pages)
========================= */
.library-embed-section {
	padding: 72px 0 88px;
	background: #fff;
	color: var(--ink);
}

.library-embed-section .section-head {
	margin-bottom: 36px;
}

.library-embed-section .section-head h2 {
	margin: 0;
	line-height: 1.16;
}

.library-embed-section .section-head .text {
	max-width: 640px;
	margin: 14px auto 0;
	color: var(--slate);
}

.library-embed {
	min-height: 600px;
}

/* The catalog doesn't report its height, so the frame is tall and scrolls inside */
.library-embed .library-frame {
	display: block;
	width: 100%;
	height: min(1100px, 85vh);
	min-height: 600px;
	border: 0;
}

@media (max-width: 767px) {
	.library-embed-section {
		padding: 48px 0 64px;
	}
}

/* Product Libraries (358): manufacturer logo cards — fit the logo instead of cropping it */
.postid-358 #libraries .card-image {
	background: #fff;
	border-bottom: 1px solid #e6edf1;
}

.postid-358 #libraries .card-image::after {
	display: none;
}

.postid-358 #libraries .card-image img {
	object-fit: contain;
	padding: 30px 26%;
}

/* =========================
   FOOTER PARTNER LOGOS — EQUAL SIZE
========================= */
.partner {
	width: 150px;
	padding: 0 16px;
}

.partner img {
	width: 100%;
	height: 100%;
	max-width: 105px;
	max-height: 34px;
	object-fit: contain;
}

/* Offset built-in transparent padding */
.partner img[src*="ricoh-logo"],
.partner img[src*="docuware-logo"],
.partner img[src*="fortinet-logo"],
.partner img[src*="papercut-logo"] {
	transform: scale(1.35);
}

.partner img[src*="huntress-logo"] {
	transform: scale(1.1);
}

.partner img[src*="hp-logo"] {
	max-height: 30px;
}

.partner img[src*="lenovo-logo"] {
	max-width: 90px;
}

@media (max-width: 767px) {
	.partner {
		width: 132px;
		padding: 0 14px;
	}

	.partner img {
		max-width: 104px;
		max-height: 30px;
	}

	.partner img[src*="hp-logo"] {
		max-height: 26px;
	}

	.partner img[src*="lenovo-logo"] {
		max-width: 88px;
	}
}

/* =========================
   ANNOUNCEMENT BAR (Theme Settings)
========================= */
.announcement-bar {
	background: #22252b;
	color: #fff;
	font: 600 14px/1.5 var(--font-body);
	text-align: center;
}

.announcement-bar .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 10px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.announcement-text p {
	margin: 0;
}

.announcement-text a {
	color: var(--sky);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.announcement-text a:hover {
	color: #fff;
}

/* Smaller global button */
.btn.announcement-link {
	margin-left: 6px;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 14px;
	box-shadow: 0 2px 10px rgba(0, 95, 137, .35);
}

.btn.announcement-link:hover,
.btn.announcement-link:focus-visible {
	transform: none;
	box-shadow: 0 4px 14px rgba(0, 95, 137, .45);
}

@media (max-width: 767px) {
	.announcement-bar {
		font-size: 13px;
	}

	.announcement-bar .container {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.btn.announcement-link {
		margin: 4px 0 0;
		padding: 7px 14px;
		font-size: 13px;
	}
}

/* Service + industry pages — centred quote text */
.single-services .layout-cards .testimonial-card,
.industry-page .layout-cards .testimonial-card {
	text-align: center;
}

.single-services .layout-cards .testimonial-card .author,
.industry-page .layout-cards .testimonial-card .author {
	justify-content: center;
	text-align: left;
}

.postid-288 .testimonial-card blockquote p {
	margin-bottom: 0;
}

/* =========================
   AWARDS SECTION (About)
========================= */
.awards-section {
	padding: 64px 0 72px;
	border-top: 1px solid #e6e2d9;
	background: #fff;
	color: var(--ink);
}

.awards-section .section-head {
	margin-bottom: 36px;
}

.awards-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.award-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 228px;
	height: 128px;
	padding: 18px 24px;
	background: #fff;
	border: 1px solid #d4e1e8;
	border-radius: 12px;
	box-shadow: 0 4px 14px rgba(31, 44, 58, .06);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

a.award-tile:hover {
	transform: translateY(-2px);
	border-color: var(--sky);
	box-shadow: 0 10px 24px rgba(0, 95, 137, .14);
}

.award-tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 767px) {
	.awards-section {
		padding: 48px 0 56px;
	}

	.awards-list {
		gap: 12px;
	}

	.award-tile {
		width: calc(50% - 6px);
		max-width: 200px;
		height: 104px;
		padding: 14px 16px;
	}

	.awards-list li {
		display: contents;
	}
}

/* Blog sort dropdown (narrower than category/search) */
.blog-select.blog-sort {
	flex-basis: 220px;
}

/* =========================
   LOCATION PAGES — OFFICE MAP CARD (Intro)
========================= */
.intro-map {
	flex: none;
	width: 602px;
}

.office-card {
	overflow: hidden;
	background: #fff;
	border: 1px solid #e2ded4;
	border-radius: 10px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .07);
}

.office-map {
	height: 300px;
	background: #e5e3df;
}

.office-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.office-details {
	padding: 22px 26px 24px;
	color: var(--ink);
}

.office-name {
	margin-bottom: 6px;
	font: 700 18px/1.3 var(--font-heading);
	color: var(--ink);
}

.office-address {
	font: 400 16px/1.55 var(--font-body);
	font-style: normal;
	color: #42474e;
}

.office-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 22px;
	margin-top: 16px;
}

.office-phone {
	font: 700 16px var(--font-body);
	color: var(--blue);
}

.office-phone:hover {
	color: var(--blue-dark);
}

@media (max-width: 1439px) {
	.intro-map {
		width: 520px;
	}
}

@media (max-width: 1199px) {
	.intro-map {
		width: 440px;
	}

	.office-map {
		height: 260px;
	}
}

@media (max-width: 991px) {
	.intro-map {
		width: 100%;
	}
}

@media (max-width: 575px) {
	.office-map {
		height: 240px;
	}

	.office-details {
		padding: 18px 20px 20px;
	}
}

/* =========================
   VIDEO SECTION
========================= */
.video-section {
	padding: 88px 0;
	background: #fff;
	color: var(--ink);
}

.video-section .section-head {
	margin-bottom: 40px;
}

.video-frame {
	position: relative;
	max-width: 960px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 13px;
	background: #111;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .14);
}

.video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 991px) {
	.video-section {
		padding: 72px 0;
	}
}

@media (max-width: 767px) {
	.video-section {
		padding: 56px 0;
	}

	.video-section .section-head {
		margin-bottom: 28px;
	}

	.video-frame {
		border-radius: 9px;
	}
}

/* =========================
   CTA — INLINE BAR STYLE (title left, button right)
========================= */
.home-cta.is-inline {
	padding: 52px 0;
	background: linear-gradient(120deg, #005f89, #00445f);
	text-align: left;
}

/* Glow + dot texture */
.home-cta.is-inline::before,
.home-cta.is-inline::after {
	content: '';
	position: absolute;
	pointer-events: none;
}

.home-cta.is-inline::before {
	width: 460px;
	height: 460px;
	left: 38%;
	top: -230px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(143, 203, 228, .28), transparent 68%);
}

.home-cta.is-inline::after {
	inset: 0 0 0 auto;
	width: 42%;
	background: radial-gradient(rgba(255, 255, 255, .16) 1.2px, transparent 1.4px) 0 0 / 18px 18px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
	mask-image: linear-gradient(90deg, transparent, #000 70%);
}

/* Smaller floating docs in the gap */
.home-cta.is-inline .doc {
	width: 62px;
	height: 78px;
	border-radius: 6px;
}

.home-cta.is-inline .doc-1 {
	left: 46%;
	top: -22px;
}

.home-cta.is-inline .doc-2 {
	left: calc(46% + 68px);
	top: auto;
	bottom: -30px;
}

.home-cta.is-inline .doc-3 {
	right: 24%;
	top: 22px;
}

.home-cta.is-inline .doc-4 {
	right: calc(24% + 70px);
	bottom: -40px;
}

.home-cta.is-inline .cta-content {
	z-index: 1;
}

.home-cta.is-inline .cta-content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	max-width: none;
}

.home-cta.is-inline .cta-content > div:not(.btn-group),
.home-cta.is-inline .cta-content h2 {
	flex: 1 1 420px;
}

.home-cta.is-inline .cta-content h2 {
	margin: 0;
	font-size: 36px;
}

.home-cta.is-inline .cta-content .eyebrow {
	flex-basis: 100%;
	margin: 0;
}

.home-cta.is-inline .cta-content .text {
	flex-basis: 100%;
	margin: 0;
}

.home-cta.is-inline .btn-group {
	flex: none;
}

@media (max-width: 991px) {
	.home-cta.is-inline .cta-content h2 {
		font-size: 30px;
	}

	.home-cta.is-inline .doc-1 {
		left: 52%;
	}

	.home-cta.is-inline .doc-2,
	.home-cta.is-inline .doc-4 {
		display: none;
	}

	.home-cta.is-inline .doc-3 {
		right: 32%;
	}
}

@media (max-width: 767px) {
	.home-cta.is-inline {
		padding: 40px 0;
		text-align: center;
	}

	.home-cta.is-inline .cta-content {
		justify-content: center;
	}

	.home-cta.is-inline .cta-content h2 {
		flex-basis: 100%;
		font-size: 26px;
	}

	.home-cta.is-inline::after {
		width: 100%;
	}

	.home-cta.is-inline .doc {
		width: 54px;
		height: 68px;
		opacity: .7;
	}

	.home-cta.is-inline .doc-1 {
		left: -22px;
		top: 18px;
	}

	.home-cta.is-inline .doc-3 {
		right: -22px;
		top: auto;
		bottom: 18px;
	}
}